import { Separator } from '@/components/ui/separator';
import {
  ArrowsLeftRightIcon,
  BankIcon,
  CalendarBlankIcon,
  HashIcon,
} from '@phosphor-icons/react';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import DetailRow from './detail-row';
import type { Transaction } from './types';

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

  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('Payment Details')}
      </h3>
      <Separator className="mb-1" />

      <DetailRow
        icon={<BankIcon weight="bold" className="size-4" />}
        label={t('Gateway')}
        value={
          <span className="font-semibold text-primary">
            {transaction.gateway}
          </span>
        }
      />
      <Separator className="opacity-40" />
      <DetailRow
        icon={<ArrowsLeftRightIcon weight="bold" className="size-4" />}
        label={t('Method Type')}
        value={<span className="capitalize">{transaction.method_type}</span>}
      />
      <Separator className="opacity-40" />
      <DetailRow
        icon={<HashIcon weight="bold" className="size-4" />}
        label={t('Transaction ID')}
        value={transaction.trx_id}
      />
      {transaction.reference && (
        <>
          <Separator className="opacity-40" />
          <DetailRow
            icon={<HashIcon weight="bold" className="size-4" />}
            label={t('Reference')}
            value={transaction.reference}
          />
        </>
      )}
      <Separator className="opacity-40" />
      <DetailRow
        icon={<CalendarBlankIcon weight="bold" className="size-4" />}
        label={t('Date & Time')}
        value={dayjs(transaction.created_at).format('MMM D, YYYY · h:mm A')}
      />
    </div>
  );
}