import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Clock, Flame } from "lucide-react";
import type { RecipeListItem } from "@/types/recipe.types";
import { CategoryBadge } from "@/components/ui/CategoryBadge";

interface RecipeCardProps {
  recipe: RecipeListItem;
  selectable?: boolean;
  selected?: boolean;
  onToggleSelected?: (id: number) => void;
  showCategory?: boolean;
}

export function RecipeCard({
  recipe,
  selectable,
  selected,
  onToggleSelected,
  showCategory,
}: RecipeCardProps) {
  const { t } = useTranslation();

  return (
    <div className="card group relative flex flex-col p-5 hover:shadow-md">
      {selectable && (
        <label className="absolute right-4 top-4 z-10 flex cursor-pointer items-center">
          <input
            type="checkbox"
            checked={Boolean(selected)}
            onChange={() => onToggleSelected?.(recipe.id)}
            className="h-5 w-5 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
            aria-label={t("recipes.selectRecipe", { name: recipe.name })}
          />
        </label>
      )}

      <Link to={`/recipes/${recipe.id}`} className="flex flex-1 flex-col">
        {showCategory && (
          <div className="mb-2 pr-8">
            <CategoryBadge category={recipe.mealCategory} />
          </div>
        )}
        <h3 className="pr-8 text-base font-semibold leading-snug group-hover:text-brand-600">
          {recipe.name}
        </h3>

        <div className="mt-auto flex flex-wrap items-center gap-2 pt-5 text-sm text-slate-500 dark:text-slate-400">
          <span className="inline-flex items-center gap-1.5 rounded-lg bg-slate-100 px-2.5 py-1 dark:bg-slate-800">
            <Flame className="h-4 w-4 text-orange-500" />
            {recipe.calories != null ? t("recipes.kcal", { count: recipe.calories }) : "—"}
          </span>
          <span className="inline-flex items-center gap-1.5 rounded-lg bg-slate-100 px-2.5 py-1 dark:bg-slate-800">
            <Clock className="h-4 w-4 text-sky-500" />
            {recipe.prepTimeMinutes != null ? t("recipes.minutes", { count: recipe.prepTimeMinutes }) : "—"}
          </span>
        </div>
      </Link>
    </div>
  );
}
