import { formatCurrency } from '@kit/shared/utils';
import { Badge } from '@kit/ui/badge';
import { cn } from '@kit/ui/utils';

export const PackageHeader = ({
  title,
  tagColor,
  analysesNr,
  language,
  price,
}: {
  title: string;
  tagColor: string;
  analysesNr: string;
  language: string;
  price: string | number;
}) => {
  return (
    <div className="space-y-1 text-center">
      <p className="text-sm sm:text-lg sm:font-medium">{title}</p>
      <h2 className="text-xl sm:text-4xl">
        {formatCurrency({
          currencyCode: 'eur',
          locale: language,
          value: price,
        })}
      </h2>
      <Badge className={cn('text-xs', tagColor)}>{analysesNr}</Badge>
    </div>
  );
};
