import { type FC } from 'react'
import TitleLine from '../../../components/TitleLine'
import { type DashboardData } from '../types/Types'
import { Box, ShoppingCart, Message, User } from 'iconsax-react'
import StatCard from './StatCard'

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

    return (
        <div className="space-y-6">
            <TitleLine title="نمای کلی داشبورد" />

            {/* آمار کلی */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <StatCard
                    title="تعداد محصولات"
                    value={data.productCount}
                    icon={<Box size={24} color="#3B82F6" />}
                />
                <StatCard
                    title="تعداد سفارشات"
                    value={data.proccessingOrders}
                    icon={<ShoppingCart size={24} color="#10B981" />}
                />
                <StatCard
                    title="کامنت های خوانده نشده"
                    value={data.pendingComments}
                    icon={<Message size={24} color="#F59E0B" />}
                />
                <StatCard
                    title="تعداد کاربران"
                    value={data.usersCount}
                    icon={<User size={24} color="#8B5CF6" />}
                />
            </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 DashboardOverview