import { type FC } from 'react'
import Td from '../../../components/Td'
import { Call, Card, User as UserIcon, Money, Eye } from 'iconsax-react'

interface WithdrawalRequestData {
    wallet: {
        _id: string;
        seller: {
            fullName: string;
            email?: string;
            phoneNumber: string;
        };
        balance: number;
    };
    withdrawals: unknown[];
    lastPaidAmount: number | null;
    lastPaidDate: string | null;
}

interface Props {
    request: WithdrawalRequestData
    onViewDetails: (request: WithdrawalRequestData) => void
}

const WithdrawalRequestTableRow: FC<Props> = ({ request, onViewDetails }) => {

    const handleViewDetails = () => {
        onViewDetails(request);
    };

    const formatCurrency = (amount: number | null) => {
        if (amount === null) return '-';
        return new Intl.NumberFormat('fa-IR', {
            style: 'currency',
            currency: 'IRR',
            minimumFractionDigits: 0,
        }).format(amount);
    };

    return (
        <tr className='tr'>
            <Td text="">
                <div className="flex items-center gap-1">
                    <UserIcon size={16} color="#8C90A3" />
                    <span>{request.wallet?.seller?.fullName || '-'}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Card size={16} color="#8C90A3" />
                    <span>{request.wallet?.seller?.email || '-'}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Call size={16} color="#8C90A3" />
                    <span>{request.wallet?.seller?.phoneNumber}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Money size={16} color="#8C90A3" />
                    <span>{formatCurrency(request.wallet?.balance || 0)}</span>
                </div>
            </Td>
            <Td text="">
                <button
                    className="flex items-center gap-1 px-3 py-1 text-xs border border-gray-300 rounded-xl bg-transparent text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-colors"
                    onClick={handleViewDetails}
                >
                    <Eye color="#8C90A3" size={14} />
                    مشاهده جزئیات
                </button>
            </Td>
        </tr>
    )
}

export default WithdrawalRequestTableRow
