import { Separator } from '@/components/ui/separator';
import { useCurrency } from '@/hooks/use-currency';
import {
  CoinsIcon,
  CurrencyDollarIcon,
  ReceiptIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import DetailRow from './detail-row';
import type { Transaction } from './types';

export default function AmountBreakdown({
  transaction,
}: {
  transaction: Transaction;
}) {
  const { t } = useTranslation();
  const { format } = useCurrency();

  return (
    <div className="rounded-2xl border border-black/5 bg-white p-5">
      <h3 className="mb-1 text-xs font-semibold tracking-widest text-black/30 uppercase">
        {t('Amount Breakdown')}
      </h3>
      <Separator className="mb-1" />

      <DetailRow
        icon={<CurrencyDollarIcon weight="bold" className="size-4" />}
        label={t('Amount')}
        value={format(transaction.amount)}
      />
      <Separator className="opacity-40" />
      <DetailRow
        icon={<CoinsIcon weight="bold" className="size-4" />}
        label={t('Charge / Fee')}
        value={
          <span className="text-destructive">+{format(transaction.fee)}</span>
        }
      />
      <Separator className="opacity-40" />
      <DetailRow
        icon={<ReceiptIcon weight="bold" className="size-4" />}
        label={t('Total Payable')}
        value={
          <span className="text-lg font-bold">{format(transaction.total)}</span>
        }
      />
    </div>
  );
}