import React from 'react';

interface PricingCardProps {
  regularPrice: number;
  promoPrice: number;
  promoActive: boolean;
}

export function PricingCard({ regularPrice, promoPrice, promoActive }: PricingCardProps) {
  const discountPercent = Math.round(((regularPrice - promoPrice) / regularPrice) * 100);

  return (
    <div className="bg-white border border-gray-200 rounded-xl p-8 shadow-sm relative">
      {promoActive && (
        <div className="absolute top-4 right-4 bg-red-100 text-red-700 text-xs font-bold px-2.5 py-1 rounded">
          Diskon {discountPercent}%
        </div>
      )}
      
      <h3 className="text-xl font-bold text-gray-900 mb-2">Akses Premium</h3>
      <ul className="text-gray-600 mb-6 text-sm space-y-2">
        <li>✓ 7.404 kosakata (A1 - C2)</li>
        <li>✓ Fitur Audio Pro</li>
        <li>✓ Progres Pintar</li>
      </ul>
      
      <div className="mb-6 pt-4 border-t border-gray-100">
        {promoActive && (
          <div className="text-gray-400 line-through text-sm mb-1">
            Rp {regularPrice.toLocaleString('id-ID')}
          </div>
        )}
        <div className="text-3xl font-bold text-gray-900">
          Rp {promoActive ? promoPrice.toLocaleString('id-ID') : regularPrice.toLocaleString('id-ID')}
        </div>
        <div className="text-xs text-gray-500 mt-1">Sekali bayar, selamanya.</div>
      </div>
      <p className="text-xs text-center text-gray-500 mt-4 bg-gray-50 p-2 rounded">
        Belajar A1 gratis dulu, upgrade kapan saja.
      </p>
    </div>
  );
}