import { Badge } from '@/components/ui/badge';
import { useCurrency } from '@/hooks/use-currency';
import { ReceiptIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import { STATUS_VARIANT, TYPE_LABEL, type Transaction } from './types';

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

  return (
    <div className="flex flex-wrap items-center justify-between gap-y-2 rounded-2xl border border-black/5 bg-white p-5">
      <div className="flex items-center gap-4">
        <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-black/5">
          <ReceiptIcon weight="duotone" className="size-6 text-black/50" />
        </div>
        <div>
          <div className="flex items-center gap-2">
            <h2 className="text-xl font-semibold">
              {t(TYPE_LABEL[transaction.type])}
            </h2>
            <Badge
              variant={STATUS_VARIANT[transaction.status]}
              className="capitalize"
            >
              {t(transaction.status)}
            </Badge>
          </div>
          <p className="text-sm text-black/40">{transaction.trx_id}</p>
        </div>
      </div>
      <div className="text-right">
        <p className="text-3xl font-bold">{format(transaction.total)}</p>
      </div>
    </div>
  );
}