'use client';

import { Display } from '@/components/display';
import { Separator } from '@shadcn/ui/separator';
import { useTranslations } from 'next-intl';

interface SubscribeBillingProps {
  order?: {
    type?: number;
    subscribe_id?: number;
    quantity?: number;
    price?: number;
    discount?: number;
    coupon_discount?: number;
    fee_amount?: number;
    amount?: number;
    unit_price?: number;
  };
}

export function SubscribeBilling({ order }: SubscribeBillingProps) {
  const t = useTranslations('subscribe.billing');

  return (
    <>
      <div className='font-semibold'>{t('billingTitle')}</div>
      <ul className='grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1'>
        {order?.type && [1, 2].includes(order?.type) && (
          <li>
            <span className='text-muted-foreground'>{t('duration')}</span>
            <span>
              {order?.quantity || 1} {t('months')}
            </span>
          </li>
        )}
        <li>
          <span className='text-muted-foreground'>{t('price')}</span>
          <span>
            <Display type='currency' value={order?.price || order?.unit_price} />
          </span>
        </li>
        <li>
          <span className='text-muted-foreground'>{t('productDiscount')}</span>
          <span>
            <Display type='currency' value={order?.discount} />
          </span>
        </li>
        <li>
          <span className='text-muted-foreground'>{t('couponDiscount')}</span>
          <span>
            <Display type='currency' value={order?.coupon_discount} />
          </span>
        </li>
        <li>
          <span className='text-muted-foreground'>{t('fee')}</span>
          <span>
            <Display type='currency' value={order?.fee_amount} />
          </span>
        </li>
      </ul>
      <Separator />
      <div className='flex items-center justify-between font-semibold'>
        <span className='text-muted-foreground'>{t('total')}</span>
        <span>
          <Display type='currency' value={order?.amount} />
        </span>
      </div>
    </>
  );
}