import { Separator } from '@/components/ui/separator';
import { WarningCircleIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import type { Transaction } from './types';

export default function TransactionError({
  transaction,
}: {
  transaction: Transaction;
}) {
  const { t } = useTranslation();
  const error = transaction.meta?.error as string | null | undefined;

  if (!error) return null;

  return (
    <div className="rounded-2xl border border-destructive/20 bg-destructive/5 p-5">
      <h3 className="mb-1 text-xs font-semibold tracking-widest text-destructive/60 uppercase">
        {t('Error')}
      </h3>
      <Separator className="mb-4 bg-destructive/10" />
      <div className="flex items-start gap-3">
        <WarningCircleIcon
          weight="fill"
          className="mt-0.5 size-5 shrink-0 text-destructive"
        />
        <p className="text-sm text-destructive/80">{error}</p>
      </div>
    </div>
  );
}