import { useAuth } from '../context/AuthContext'
import { Link } from 'react-router-dom'

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

    return (
        <div className="min-h-screen bg-gray-100 p-8">
            <div className="mx-auto max-w-7xl">
                <div className="flex items-center justify-between rounded-lg bg-white p-6 shadow">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900">Painel do Colaborador</h1>
                        <p className="text-gray-600">Bem-vindo, {user?.name}</p>
                    </div>
                    <div className="flex gap-3">
                        <Link
                            to="/search"
                            className="rounded bg-green-600 px-4 py-2 font-bold text-white hover:bg-green-700"
                        >
                            🛒 Comprar Medicamentos
                        </Link>
                        <button
                            onClick={logout}
                            className="rounded bg-red-600 px-4 py-2 font-bold text-white hover:bg-red-700"
                        >
                            Sair
                        </button>
                    </div>
                </div>

                <div className="mt-8 grid gap-6 md:grid-cols-3">
                    <Link to="/search" className="rounded-lg bg-white p-6 shadow hover:shadow-lg transition-shadow">
                        <h3 className="text-lg font-bold text-green-600">🛒 Comprar Medicamentos</h3>
                        <p className="mt-2 text-gray-600">Encontrar medicamentos próximos à venda.</p>
                    </Link>
                    <div className="rounded-lg bg-white p-6 shadow">
                        <h3 className="text-lg font-bold">Pedidos</h3>
                        <p className="mt-2 text-gray-600">Gerenciar pedidos recebidos.</p>
                        {/* Link to Orders */}
                    </div>
                    <div className="rounded-lg bg-white p-6 shadow">
                        <h3 className="text-lg font-bold">Estoque</h3>
                        <p className="mt-2 text-gray-600">Consultar e ajustar estoque.</p>
                        {/* Link to Inventory */}
                    </div>
                </div>
            </div>
        </div>
    )
}
