Untitled

'use client';

import { FolderOpen } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { useTranslation, type SupportedLanguages } from "@/utils/translations";
import { useSettings } from "@/hooks/useSettings";

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

  return (
    <Card className="w-full h-[50vh] flex items-center justify-center bg-muted/50">
      <CardContent className="flex flex-col items-center justify-center space-y-4 p-8">
        <FolderOpen className="h-16 w-16 text-muted-foreground/60" />
        <div className="text-center space-y-2">
          <h3 className="text-xl font-semibold">{t('gallery.noImagesFound')}</h3>
          <p className="text-muted-foreground">
            {t('gallery.noImagesDescription')}
          </p>
        </div>
      </CardContent>
    </Card>
  );
}



import { useState } from 'react';
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Calendar, Clock } from 'lucide-react';
import type { GalleryImage } from '@/lib/types';
import { ImagePreview } from './image-preview';
import { useTranslation, type SupportedLanguages } from "@/utils/translations";
import { useSettings } from "@/hooks/useSettings";

interface ImageCardProps {
  image: GalleryImage;
}

export function ImageCard({ image }: ImageCardProps) {
  const [previewOpen, setPreviewOpen] = useState(false);
  const { settings } = useSettings();
  const { t } = useTranslation(settings?.language as SupportedLanguages || 'EN');

  return (
    <>
      <Card 
        className="overflow-hidden group hover:shadow-lg transition-shadow cursor-pointer"
        onClick={() => setPreviewOpen(true)}
      >
        <CardHeader className="p-0">
          <div className="aspect-[16/9] overflow-hidden">
            <img
              src={image.path}
              alt={image.title}
              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
            />
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <h3 className="text-lg font-semibold mb-2 truncate">{image.title}</h3>
          <Badge variant={image.model === 'api' ? 'default' : 'secondary'}>
            {image.model === 'api' ? t('gallery.apiClassification') : t('gallery.localClassification')}
          </Badge>
        </CardContent>
        <CardFooter className="p-4 pt-0 flex items-center gap-4 text-sm text-muted-foreground">
          <div className="flex items-center gap-1">
            <Calendar className="h-4 w-4" />
            <span>{image.date}</span>
          </div>
          <div className="flex items-center gap-1">
            <Clock className="h-4 w-4" />
            <span>{image.time}</span>
          </div>
        </CardFooter>
      </Card>

      <ImagePreview 
        image={image}
        open={previewOpen}
        onOpenChange={setPreviewOpen}
      />
    </>
  );
}