import type { Metadata } from 'next';
import Link from 'next/link';

export const metadata: Metadata = {
  title: 'Admin — mercadodevida',
};

export default function AdminDashboard() {
  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
        {[
          { label: 'Productos', value: '—', icon: '📦', color: 'bg-blue-50 border-blue-100' },
          { label: 'Pedidos', value: '—', icon: '🧾', color: 'bg-green-50 border-green-100' },
          { label: 'Usuarios', value: '—', icon: '👥', color: 'bg-orange-50 border-orange-100' },
        ].map((stat) => (
          <div key={stat.label} className={`${stat.color} border rounded-xl p-6`}>
            <div className="text-3xl mb-2">{stat.icon}</div>
            <p className="text-3xl font-bold text-gray-900">{stat.value}</p>
            <p className="text-sm text-gray-500 mt-1">{stat.label}</p>
          </div>
        ))}
      </div>

      <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div className="bg-white border border-gray-200 rounded-xl p-6">
          <h2 className="font-bold text-gray-900 mb-4">Acciones rápidas</h2>
          <div className="space-y-2">
            <a href="/admin/products" className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
              <span>📦</span>
              <span className="text-sm font-medium">Gestionar productos</span>
            </a>
            <a href="/admin/orders" className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
              <span>🧾</span>
              <span className="text-sm font-medium">Ver pedidos</span>
            </a>
            <Link href="/" className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
              <span>🌿</span>
              <span className="text-sm font-medium">Ver tienda</span>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
