Untitled

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');

  // Function to get translated title if it's a default bin, otherwise return original title
  const getTranslatedTitle = (title: string) => {
    // Check if the title is one of the default bins
    const binKey = `bins.${title}` as const;
    const translatedBin = t(binKey);
    
    // If the translation returns the key itself, it means no translation was found
    // In that case, return the original title
    return translatedBin === binKey ? title : translatedBin;
  };

  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={getTranslatedTitle(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">
            {getTranslatedTitle(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,
          title: getTranslatedTitle(image.title)
        }}
        open={previewOpen}
        onOpenChange={setPreviewOpen}
      />
    </>
  );
}