import { formatCurrency } from '../../utils/format';

interface PriceDisplayProps {
  dailyPrice?: number;
  monthlyPrice?: number;
  size?: 'sm' | 'md' | 'lg';
}

export function PriceDisplay({ dailyPrice, monthlyPrice, size = 'md' }: PriceDisplayProps) {
  const textSizes = {
    sm: 'text-sm',
    md: 'text-lg',
    lg: 'text-2xl',
  };

  const labelSizes = {
    sm: 'text-[10px]',
    md: 'text-xs',
    lg: 'text-sm',
  };

  if (dailyPrice == null && monthlyPrice == null) {
    return <span className="text-gray-400 text-sm">Price not set</span>;
  }

  return (
    <div className="flex items-baseline gap-3">
      {dailyPrice != null && (
        <p className={`${textSizes[size]} font-bold text-primary-600`}>
          {formatCurrency(dailyPrice)}
          <span className={`${labelSizes[size]} font-normal text-gray-400 ml-0.5`}>/day</span>
        </p>
      )}
      {dailyPrice != null && monthlyPrice != null && (
        <span className="text-gray-300">|</span>
      )}
      {monthlyPrice != null && (
        <p className={`${textSizes[size]} font-bold text-primary-600`}>
          {formatCurrency(monthlyPrice)}
          <span className={`${labelSizes[size]} font-normal text-gray-400 ml-0.5`}>/month</span>
        </p>
      )}
    </div>
  );
}
