import React from 'react';
import DateTime from '../components/DateTime';
import { FaMoneyBillTransfer, FaChartLine, FaCircleCheck, FaClock } from 'react-icons/fa6';

const BankaCardBox = () => {
    const siteKasa = 0;
    const hesapPaylasimi = true;
    const checkedFormAmount = 0;
    const checkedFormList = 0;
    const reqFormAmount = 0;
    const reqFormList = 0;

    return (
        <div className="bg-white rounded-lg shadow-lg overflow-hidden max-w-sm">
            {/* Header */}
            <div className="bg-emerald-600 px-6 py-4">
                <div className="flex items-center justify-between">
                    <h2 className="text-lg font-semibold text-white">Bank Card</h2>
                    <FaMoneyBillTransfer className="text-2xl text-white" />
                </div>
            </div>

            {/* Content */}
            <div className="p-6 space-y-6">
                {/* DateTime */}
                <div className="flex items-center text-sm text-gray-500">
                    <DateTime />
                </div>

                {/* Total Balance */}
                <div className="bg-emerald-50 rounded-lg p-4">
                    <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-gray-600">Total Balance</span>
                        <span className="text-lg font-bold text-emerald-600">
                            {Number(siteKasa).toLocaleString("tr-TR", { 
                                minimumFractionDigits: 2, 
                                maximumFractionDigits: 2 
                            })} ₺
                        </span>
                    </div>
                </div>

                {/* Account Status */}
                <div className="bg-gray-50 rounded-lg p-4">
                    <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-gray-600">Account Sharing</span>
                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                            hesapPaylasimi 
                                ? 'bg-green-100 text-green-800' 
                                : 'bg-red-100 text-red-800'
                        }`}>
                            {hesapPaylasimi ? 'Active' : 'Inactive'}
                        </span>
                    </div>
                </div>

                {/* Transaction Summary */}
                <div className="space-y-4">
                    {/* Deposits Section */}
                    <div className="rounded-lg border border-gray-200 p-4">
                        <h3 className="text-sm font-medium text-gray-700 mb-3 flex items-center">
                            <FaChartLine className="mr-2 text-emerald-500" />
                            Deposits
                        </h3>
                        <div className="grid grid-cols-2 gap-4">
                            {/* Approved */}
                            <div className="space-y-1">
                                <div className="flex items-center text-sm text-gray-600">
                                    <FaCircleCheck className="mr-1 text-green-500" />
                                    <span>Approved</span>
                                </div>
                                <div className="font-semibold text-green-600">
                                    {Number(checkedFormAmount).toLocaleString("tr-TR", { 
                                        minimumFractionDigits: 2, 
                                        maximumFractionDigits: 2 
                                    })} ₺
                                </div>
                                <div className="text-xs text-gray-500">
                                    {checkedFormList} transactions
                                </div>
                            </div>
                            {/* Pending */}
                            <div className="space-y-1">
                                <div className="flex items-center text-sm text-gray-600">
                                    <FaClock className="mr-1 text-blue-500" />
                                    <span>Pending</span>
                                </div>
                                <div className="font-semibold text-blue-600">
                                    {Number(reqFormAmount).toLocaleString("tr-TR", { 
                                        minimumFractionDigits: 2, 
                                        maximumFractionDigits: 2 
                                    })} ₺
                                </div>
                                <div className="text-xs text-gray-500">
                                    {reqFormList} transactions
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Withdrawals Section */}
                    <div className="rounded-lg border border-gray-200 p-4">
                        <h3 className="text-sm font-medium text-gray-700 mb-3 flex items-center">
                            <FaMoneyBillTransfer className="mr-2 text-emerald-500" />
                            Withdrawals
                        </h3>
                        <div className="grid grid-cols-2 gap-4">
                            {/* Approved */}
                            <div className="space-y-1">
                                <div className="flex items-center text-sm text-gray-600">
                                    <FaCircleCheck className="mr-1 text-green-500" />
                                    <span>Approved</span>
                                </div>
                                <div className="font-semibold text-green-600">
                                    {Number(checkedFormAmount).toLocaleString("tr-TR", { 
                                        minimumFractionDigits: 2, 
                                        maximumFractionDigits: 2 
                                    })} ₺
                                </div>
                                <div className="text-xs text-gray-500">
                                    {checkedFormList} transactions
                                </div>
                            </div>
                            {/* Pending */}
                            <div className="space-y-1">
                                <div className="flex items-center text-sm text-gray-600">
                                    <FaClock className="mr-1 text-blue-500" />
                                    <span>Pending</span>
                                </div>
                                <div className="font-semibold text-blue-600">
                                    {Number(reqFormAmount).toLocaleString("tr-TR", { 
                                        minimumFractionDigits: 2, 
                                        maximumFractionDigits: 2 
                                    })} ₺
                                </div>
                                <div className="text-xs text-gray-500">
                                    {reqFormList} transactions
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default BankaCardBox;