import {
  ArrowDownIcon,
  ArrowUpIcon,
  ArrowsLeftRightIcon,
  ChartLineUpIcon,
  TrophyIcon,
} from '@phosphor-icons/react';
import { Transaction, TxType } from '../admin/transactions/types';

const TYPE_CONFIG: Record<
  TxType,
  { icon: React.ReactNode; color: string; label: string }
> = {
  deposit: {
    icon: <ArrowDownIcon weight="bold" className="size-3 text-success" />,
    color: 'text-success',
    label: 'Deposit',
  },
  withdrawal: {
    icon: <ArrowUpIcon weight="bold" className="size-3 text-destructive" />,
    color: 'text-destructive',
    label: 'Withdrawal',
  },
  investment: {
    icon: <ArrowsLeftRightIcon weight="bold" className="size-3 text-primary" />,
    color: 'text-primary',
    label: 'Investment',
  },
  roi: {
    icon: <ArrowDownIcon weight="bold" className="size-3 text-success" />,
    color: 'text-success',
    label: 'ROI',
  },
  referral: {
    icon: <ArrowDownIcon weight="bold" className="size-3 text-purple" />,
    color: 'text-purple',
    label: 'Referral',
  },
  capital_return: {
    icon: <ArrowDownIcon weight="bold" className="size-3 text-success" />,
    color: 'text-success',
    label: 'Capital Return',
  },
  investment_renewal: {
    icon: <ArrowsLeftRightIcon weight="bold" className="text-yellow size-3" />,
    color: 'text-yellow',
    label: 'Investment Renewal',
  },
  trade_buy: {
    icon: <ChartLineUpIcon weight="bold" className="size-3 text-primary" />,
    color: 'text-primary',
    label: 'Trade Buy',
  },
  trade_sell: {
    icon: <ArrowUpIcon weight="bold" className="size-3 text-destructive" />,
    color: 'text-destructive',
    label: 'Trade Sell',
  },
  market_payout: {
    icon: <TrophyIcon weight="bold" className="size-3 text-success" />,
    color: 'text-success',
    label: 'Market Payout',
  },
};
const TableTransactionType = ({
  row,
}: {
  row: {
    original: Transaction;
  };
}) => {
  const tx = row.original;
  const cfg = TYPE_CONFIG[tx.type] ?? TYPE_CONFIG.deposit;

  return (
    <div className="flex items-center gap-1.5">
      <span className="flex size-5 items-center justify-center rounded-full bg-black/5">
        {cfg.icon}
      </span>
      <span className={`text-sm font-medium ${cfg.color}`}>{cfg.label}</span>
    </div>
  );
};

export default TableTransactionType;