import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { useCurrency } from '@/hooks/use-currency';
import { useTranslation } from 'react-i18next';
import { Transaction } from '../admin/transactions/types';

const TableTransactionAmount = ({
  transaction,
}: {
  transaction: Transaction;
}) => {
  const { t } = useTranslation();
  const isAdminRoute = window.location.pathname.startsWith('/admin');
  const { format } = useCurrency();
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div className="cursor-default">
          <p className="mb-1 font-medium">{format(transaction.total)}</p>
          <div className="flex items-center gap-1">
            <p
              className={
                isAdminRoute
                  ? 'text-sm text-black/50'
                  : 'text-sm text-black/40 dark:text-white/40'
              }
            >
              {format(transaction.amount)}
            </p>
            <p
              className={
                isAdminRoute
                  ? 'text-sm text-black/50'
                  : 'text-sm text-black/40 dark:text-white/40'
              }
            >
              +
            </p>
            <p className="text-sm text-red-600">{format(transaction.fee)}</p>
          </div>
        </div>
      </TooltipTrigger>
      <TooltipContent
        className="min-w-36 bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
        side="right"
        sideOffset={-30}
        arrowClassName="bg-white fill-white dark:bg-zinc-800 dark:fill-zinc-800"
      >
        <div className="space-y-1">
          <div className="flex justify-between gap-4">
            <span className="opacity-70">{t('Subtotal')}</span>
            <span>{format(transaction.amount)}</span>
          </div>
          <div className="flex justify-between gap-4">
            <span className="opacity-70">{t('Fee')}</span>
            <span className="text-red-400">{format(transaction.fee)}</span>
          </div>
          <div className="flex justify-between gap-4 border-t border-black/10 pt-1 dark:border-white/20">
            <span className="opacity-70">{t('Total')}</span>
            <span className="font-semibold">{format(transaction.total)}</span>
          </div>
        </div>
      </TooltipContent>
    </Tooltip>
  );
};

export default TableTransactionAmount;