"use client";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { CategoryIcon } from "@/components/ui/category-icon";
import { Pencil, Trash2 } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import type { Category } from "@/lib/types";

interface CategoryCardProps {
  category: Category;
  stats: { total: number; count: number };
  formatCurrency: (amount: number) => string;
  onEdit: (category: Category) => void;
  onDelete: (categoryId: string) => void;
}

export function CategoryCard({
  category,
  stats,
  formatCurrency,
  onEdit,
  onDelete,
}: CategoryCardProps) {
  const isMobile = useIsMobile();

  return (
    <div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
      <div className="flex items-center gap-2 min-w-0 flex-1">
        <div
          className="w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center shrink-0"
          style={{ backgroundColor: `${category.color}20` }}
        >
          <CategoryIcon
            icon={category.icon}
            color={category.color}
            size={isMobile ? 10 : 12}
          />
        </div>
        <span className="text-xs md:text-sm truncate">{category.name}</span>
        {!isMobile && (
          <span className="text-xs md:text-sm text-muted-foreground shrink-0">
            {stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
            {formatCurrency(stats.total)}
          </span>
        )}
        {isMobile && (
          <span className="text-[10px] md:text-xs text-muted-foreground shrink-0">
            {stats.count} 💳
          </span>
        )}
        {category.keywords.length > 0 && (
          <Badge
            variant="outline"
            className="text-[10px] px-1 md:px-1.5 py-0 h-3 md:h-4 shrink-0"
          >
            {category.keywords.length}
          </Badge>
        )}
      </div>

      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100 transition-opacity">
        <Button
          variant="ghost"
          size="icon"
          className="h-6 w-6 md:h-6 md:w-6"
          onClick={() => onEdit(category)}
        >
          <Pencil className="w-3 h-3" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          className="h-6 w-6 md:h-6 md:w-6 text-destructive hover:text-destructive"
          onClick={() => onDelete(category.id)}
        >
          <Trash2 className="w-3 h-3" />
        </Button>
      </div>
    </div>
  );
}