import { useAuth } from '@/context/AuthContext'
import { Link } from 'react-router-dom'
import { Header } from '@/components/Header'
import { FaMagnifyingGlass, FaClipboardList } from 'react-icons/fa6'

export function EmployeeDashboardPage() {
    const { user } = useAuth()

    const cards = [
        {
            title: 'Comprar Medicamentos',
            description: 'Encontre medicamentos próximos à venda.',
            path: '/search',
            icon: <FaMagnifyingGlass size={32} color="black" />,
        },
        {
            title: 'Pedidos',
            description: 'Visualizar e acompanhar seus pedidos.',
            path: '/orders',
            icon: <FaClipboardList size={32} color="black" />,
        },
    ]

    return (
        <div className="min-h-screen bg-gray-100">
            <Header />

            <div className="mx-auto max-w-7xl px-4 py-6">
                {/* Page Title */}
                <div className="mb-6">
                    <h1 className="text-2xl font-bold text-gray-900">Painel do Colaborador</h1>
                    <p className="mt-1 text-sm text-gray-500">
                        Olá, {user?.name} — acesse os recursos disponíveis para você
                    </p>
                </div>

                {/* Cards Grid */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {cards.map((card) => (
                        <Link
                            key={card.path}
                            to={card.path}
                            className="group flex items-center gap-4 rounded-xl bg-white p-6 shadow hover:shadow-md transition-all"
                        >
                            <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-gray-100 group-hover:bg-gray-200 transition-colors">
                                {card.icon}
                            </div>
                            <div>
                                <h3 className="text-base font-semibold text-gray-900 group-hover:text-[#0F4C81] transition-colors">
                                    {card.title}
                                </h3>
                                <p className="mt-0.5 text-sm text-gray-500">{card.description}</p>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    )
}
