"use client";
import { Package, Category } from "@/types/models";
import { useTranslations } from "next-intl";
import { Menu } from "lucide-react";
import { PackageBox } from "../../(all)/_components/package-box";
import { ProgramsFilter } from "../../(all)/_components/filter";
import { Button } from "@/components/ui/button";
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from "@/components/ui/sheet";

interface Props {
    packages: Package[];
    categories: Category[];
}

export function PackagesContainer({ packages, categories }: Props) {
    const t = useTranslations();

    return (
        <section className="md:col-span-2">
            {/* Top bar */}
            <div className="flex items-center justify-between mb-6">
                <h2 className="font-semibold text-gray-700">
                    {packages.length} {t("packages.found")}
                </h2>
                {/* Mobile filter trigger */}
                <Sheet>
                    <SheetTrigger asChild className="block md:hidden">
                        <Button variant="secondary" size="icon-sm">
                            <Menu />
                        </Button>
                    </SheetTrigger>
                    <SheetContent className="overflow-y-scroll pb-4">
                        <SheetHeader>
                            <SheetTitle />
                            <SheetDescription />
                        </SheetHeader>
                        <div className="p-2">
                            <ProgramsFilter categories={categories} />
                        </div>
                    </SheetContent>
                </Sheet>
            </div>

            {/* Grid */}
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
                {packages.length > 0 ? (
                    packages.map((pkg) => <PackageBox key={pkg.id} pkg={pkg} />)
                ) : (
                    <div className="md:col-span-2 grid place-items-center min-h-[40dvh]">
                        <p className="text-gray-500 text-lg font-semibold">
                            {t("packages.no_packages")}
                        </p>
                    </div>
                )}
            </div>
        </section>
    );
}