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

const ProductsCountSection: 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-3 gap-6">
                <StatCard
                    title="کل محصولات"
                    value={data.productCount}
                    icon={<Box size={24} color="#3B82F6" />}
                />
                <StatCard
                    title="محصولات در انتظار تایید"
                    value={data.pendingProductCount}
                    icon={<Box size={24} color="#F59E0B" />}
                />
                <StatCard
                    title="برندهای در انتظار تایید"
                    value={data.pendingBrandsCount}
                    icon={<Shop size={24} color="#8B5CF6" />}
                />
            </div>
        </div>
    )
}

export default ProductsCountSection
