Untitled

'use client';
import { useEffect, useState } from 'react';
import { GalleryGrid } from '@/components/gallery-grid';
import type { GalleryImage } from '@/lib/types';
import { parseImageFilename } from '@/lib/types';
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 { useTranslation, type SupportedLanguages } from "@/utils/translations";
import { useSettings } from "@/hooks/useSettings";

export default function GalleryPage() {
  const [images, setImages] = useState<GalleryImage[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { settings } = useSettings();
  const { t } = useTranslation(settings?.language as SupportedLanguages || 'EN');

  useEffect(() => {
    async function loadImages() {
      try {
        const response = await fetch('/api/images');
        if (!response.ok) throw new Error('Failed to fetch images');
        
        const data = await response.json();
        const parsedImages = data
          .map((img: { filename: string; url: string }) => ({
            ...parseImageFilename(img.filename),
            path: img.url,
          }))
          .filter((img: GalleryImage | null): img is GalleryImage => img !== null);
        
        setImages(parsedImages);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load images');
      } finally {
        setLoading(false);
      }
    }
    loadImages();
  }, []);

  if (error) {
    return (
      <div className="min-h-screen bg-background p-6">
        <div className="text-destructive text-center">
          {t('gallery.errorLoadingImages')} {error}
        </div>
      </div>
    );
  }

  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>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>{t('navigation.gallery')}</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className="container mx-auto p-6">
          <GalleryGrid images={images} loading={loading} />
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}