import Link from 'next/link';

export default function DashboardPage() {
  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <DashboardCard
          title="Product Library"
          description="Manage your food products and nutrition data"
          href="/products"
        />
        <DashboardCard
          title="Recipes"
          description="Create and manage recipes with auto-nutrition"
          href="/recipes"
        />
        <DashboardCard
          title="Pantry"
          description="Track what's in your fridge and pantry"
          href="/pantry"
        />
        <DashboardCard
          title="Meal Plans"
          description="Plan your weekly meals and hit nutrition targets"
          href="/meal-plans"
        />
        <DashboardCard
          title="Shopping Lists"
          description="Create shopping lists and track prices"
          href="/shopping"
        />
        <DashboardCard
          title="Settings"
          description="Manage household and account settings"
          href="/settings"
        />
      </div>
    </div>
  );
}

function DashboardCard({
  title,
  description,
  href,
}: {
  title: string;
  description: string;
  href: string;
}) {
  return (
    <Link
      href={href}
      className="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition-shadow"
    >
      <h2 className="text-lg font-semibold">{title}</h2>
      <p className="mt-1 text-sm text-gray-500">{description}</p>
    </Link>
  );
}