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

const UsersCountSection: 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 gap-6">
                <StatCard
                    title="کل کاربران"
                    value={data.usersCount}
                    icon={<User size={24} color="#8B5CF6" />}
                />
                <StatCard
                    title="تعداد فروشندگان"
                    value={data.sellersCount}
                    icon={<Shop size={24} color="#10B981" />}
                />
            </div>
        </div>
    )
}

export default UsersCountSection
