Epicure/apps/web/components/shopping-lists/shopping-lists-page-content.tsx

"use client";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { ShoppingCart } from "lucide-react";
import { NewShoppingListButton } from "@/components/meal-plan/new-shopping-list-button";

type ShoppingListItem = {
  id: string;
  name: string;
  generatedAt: string | null;
  totalItems: number;
  checkedItems: number;
};

type Props = {
  lists: ShoppingListItem[];
};

export function ShoppingListsPageContent({ lists }: Props) {
  const t = useTranslations("shoppingLists");

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
        </div>
        <NewShoppingListButton />
      </div>

      {lists.length === 0 ? (
        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
          <ShoppingCart className="h-12 w-12 text-muted-foreground/40" />
          <p className="text-muted-foreground text-sm">{t("empty")}</p>
        </div>
      ) : (
        <div className="space-y-3 max-w-lg">
          {lists.map((list) => (
            <Link
              key={list.id}
              href={`/shopping-lists/${list.id}`}
              className="flex items-center justify-between rounded-xl border p-4 hover:shadow-sm transition-shadow"
            >
              <div className="space-y-1">
                <h2 className="font-semibold">{list.name}</h2>
                <p className="text-sm text-muted-foreground">
                  {list.totalItems === 0
                    ? t("listEmpty")
                    : t("items", { checked: list.checkedItems, total: list.totalItems })}
                  {list.generatedAt && ` · ${t("generated")}`}
                </p>
              </div>
              <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs font-bold">
                {list.totalItems === 0 ? "—" : `${Math.round((list.checkedItems / list.totalItems) * 100)}%`}
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}