import { type FC } from 'react'
import { type DashboardData } from '../types/Types'
import { ShoppingCart } from 'iconsax-react'
import StatCard from './StatCard'

const OrdersCountSection: FC<{ data?: DashboardData }> = ({ data }) => {
    if (!data) return null

    return (
        <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <StatCard
                    title="سفارشات در حال پردازش"
                    value={data.proccessingOrders}
                    icon={<ShoppingCart size={24} color="#10B981" />}
                />
                <StatCard
                    title="درخواست‌های برداشت وجه"
                    value={data.withdrawalRequests}
                    icon={<ShoppingCart size={24} color="#F59E0B" />}
                />
            </div>

            {/* آمار فروش روزانه */}
            <div className="bg-white rounded-lg p-6 shadow-sm">
                <h3 className="text-lg font-medium mb-4">آمار فروش روزانه</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="text-center">
                        <div className="text-2xl font-bold text-blue-600">{data.dailySales.totalOrders}</div>
                        <div className="text-sm text-gray-600">تعداد سفارشات</div>
                    </div>
                    <div className="text-center">
                        <div className="text-2xl font-bold text-green-600">{data.dailySales.totalSales.toLocaleString()} تومان</div>
                        <div className="text-sm text-gray-600">مجموع فروش</div>
                    </div>
                    <div className="text-center">
                        <div className="text-2xl font-bold text-purple-600">{data.dailySales.itemsSold}</div>
                        <div className="text-sm text-gray-600">تعداد آیتم فروش رفته</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default OrdersCountSection
