'use client';

import { memo, useCallback } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { BookText, Pencil, Trash2 } from 'lucide-react';
import type { GlossaryListItem } from './types';
import { useI18n, formatDate } from '@/lib/i18n';

interface GlossaryCardProps {
  glossary: GlossaryListItem;
  onEdit: (id: string) => void;
  onDelete: (id: string, name: string) => void;
  isDeleting?: boolean;
}

export const GlossaryCard = memo(function GlossaryCard({
  glossary,
  onEdit,
  onDelete,
  isDeleting = false,
}: GlossaryCardProps) {
  const { t, locale } = useI18n();
  const handleEdit = useCallback(() => {
    onEdit(glossary.id);
  }, [glossary.id, onEdit]);

  const handleDelete = useCallback(() => {
    onDelete(glossary.id, glossary.name);
  }, [glossary.id, glossary.name, onDelete]);

  const formattedDate = formatDate(new Date(glossary.created_at), locale, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  });

  return (
    <Card className="group hover:border-border/80 transition-colors">
      <CardContent className="p-4">
        <div className="flex items-start justify-between gap-4">
          <div className="flex items-start gap-3 min-w-0 flex-1">
            <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-accent/10">
              <BookText className="size-5 text-accent" />
            </div>
            <div className="min-w-0 flex-1">
              <h3 className="font-medium text-foreground truncate">{glossary.name}</h3>
              <div className="flex items-center gap-2 mt-1">
                <Badge variant="secondary" className="text-xs">
                  {glossary.terms_count} {glossary.terms_count === 1 ? t('glossaries.card.term') : t('glossaries.card.terms')}
                </Badge>
                <span className="text-xs text-muted-foreground">
                  {t('glossaries.card.created')} {formattedDate}
                </span>
              </div>
            </div>
          </div>
          
          <div className="flex items-center gap-1 shrink-0">
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={handleEdit}
              className="opacity-0 group-hover:opacity-100 transition-opacity"
              aria-label={`Edit ${glossary.name}`}
            >
              <Pencil className="size-3.5 text-muted-foreground hover:text-foreground" />
            </Button>
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={handleDelete}
              disabled={isDeleting}
              className="opacity-0 group-hover:opacity-100 transition-opacity"
              aria-label={`Delete ${glossary.name}`}
            >
              <Trash2 className="size-3.5 text-muted-foreground hover:text-destructive" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
});