Untitled

"use client"

import { BinDisplay } from "@/components/bin-display";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { Card } from "@/components/ui/card";
import { GaugeCircle } from 'lucide-react';
import { useTranslation, type SupportedLanguages } from "@/utils/translations";
import { useSettings } from "@/hooks/useSettings";

export default function Page() {
  const { settings } = useSettings();
  const { t } = useTranslation(settings?.language as SupportedLanguages || 'EN');

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="flex shrink-0 items-center gap-2 border-b px-4 py-6">
          <SidebarTrigger className="-ml-1" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="">{t('navigation.home')}</BreadcrumbLink>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className="p-4">
          <Card className="bg-card/50 backdrop-blur-sm">
            <div className="p-4">
              <div className="flex justify-center items-center gap-3 mb-6">
                <GaugeCircle className="w-8 h-8 text-primary" />
                <h2 className="text-3xl font-semibold bg-gradient-to-r from-primary/90 to-primary bg-clip-text text-transparent">
                  {t('common.currentFillLevels')}
                </h2>
              </div>
              <div className="relative w-full">
                <div className="grid grid-cols-1 min-[1000px]:grid-cols-2 xl:grid-cols-3 min-[1800px]:grid-cols-4 place-items-center gap-0">
                  <BinDisplay />
                </div>
              </div>
            </div>
          </Card>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}