import { Separator } from '@/components/ui/separator';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import type { Resolution, Transaction } from './types';

export default function TxTimeline({
  transaction,
  resolution,
}: {
  transaction: Transaction;
  resolution?: Resolution | null;
}) {
  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('Timeline')}
      </h3>
      <Separator className="mb-4" />

      <ol className="relative space-y-4 border-l border-black/10 pl-5">
        <li>
          <span className="absolute -left-[5px] size-2.5 rounded-full bg-primary" />
          <p className="text-sm font-medium">{t('Transaction created')}</p>
          <p className="text-xs text-black/40">
            {dayjs(transaction.created_at).format('MMM D, YYYY · h:mm A')}
          </p>
        </li>
        {resolution && (
          <li>
            <span
              className={`absolute -left-[5px] size-2.5 rounded-full ${
                resolution.action === 'approved'
                  ? 'bg-success'
                  : 'bg-destructive'
              }`}
            />
            <p className="text-sm font-medium capitalize">
              {t(resolution.action)} {t('by')} {resolution.by}
            </p>
            <p className="text-xs text-black/40">
              {dayjs(resolution.at).format('MMM D, YYYY · h:mm A')}
            </p>
          </li>
        )}
      </ol>
    </div>
  );
}