import { Head } from '@inertiajs/react'
import { GwinAppLayout } from '@/layouts/gwin-app-layout'

export default function Dashboard() {
    return (
        <GwinAppLayout>
            <Head title='Dashboard' />
            <div className='flex h-full flex-1 flex-col gap-6 p-6'>
                <div>
                    <h1 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100'>
                        Dashboard
                    </h1>
                    <p className='mt-1 text-sm text-gray-500 dark:text-gray-400'>
                        Selamat datang di GMP GWIN — Warehouse & Inventory Management
                    </p>
                </div>

                <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'>
                    <StatCard label='Total Item' value='-' description='Master item aktif' color='amber' />
                    <StatCard label='Total Aset' value='-' description='Aset terdaftar' color='amber' />
                    <StatCard label='Kategori Item' value='-' description='Kategori aktif' color='amber' />
                </div>
            </div>
        </GwinAppLayout>
    )
}

function StatCard({
    label,
    value,
    description,
    color,
}: {
    label: string
    value: string | number
    description: string
    color: string
}) {
    return (
        <div className='rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800'>
            <p className='text-sm font-medium text-gray-500 dark:text-gray-400'>{label}</p>
            <p className={`mt-1 text-3xl font-bold text-${color}-600 dark:text-${color}-400`}>{value}</p>
            <p className='mt-1 text-xs text-gray-400 dark:text-gray-500'>{description}</p>
        </div>
    )
}
