import { Link } from "react-router-dom";
import { clsx } from "clsx";
import type { DietMethod } from "@/types/method";
import { CATEGORIES } from "@/types/method";
import { Badge } from "@/components/Badge";
import { DifficultyBadge } from "@/components/DifficultyBadge";
import { EffectivenessIndicator } from "@/components/EffectivenessIndicator";
import { BookmarkButton } from "@/components/BookmarkButton";

interface MethodCardProps {
  method: DietMethod;
  isBookmarked: boolean;
  onToggleBookmark: (id: string) => void;
}

export function MethodCard({ method, isBookmarked, onToggleBookmark }: MethodCardProps) {
  const category = CATEGORIES[method.category];

  return (
    <Link
      to={`/methods/${method.slug}`}
      className={clsx(
        "group relative flex flex-col rounded-2xl border border-gray-200 bg-white p-6 transition-all",
        "hover:border-primary-300 hover:shadow-lg hover:shadow-primary-500/5",
        "dark:border-gray-800 dark:bg-gray-900 dark:hover:border-primary-700",
      )}
    >
      <div className="absolute right-4 top-4">
        <BookmarkButton
          isBookmarked={isBookmarked}
          onClick={() => onToggleBookmark(method.id)}
        />
      </div>

      <div className="flex items-center gap-2">
        <span className="text-2xl" aria-hidden="true">{category.icon}</span>
        <Badge variant={category.color}>{category.label}</Badge>
        <DifficultyBadge difficulty={method.difficulty} />
      </div>

      <h3 className="mt-3 text-lg font-semibold text-gray-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-400">
        {method.title}
      </h3>

      <p className="mt-2 flex-1 text-sm text-gray-500 dark:text-gray-400">
        {method.shortDescription}
      </p>

      <div className="mt-4">
        <EffectivenessIndicator effectiveness={method.effectiveness} />
      </div>

      <div className="mt-3 text-xs text-gray-400 dark:text-gray-500">
        {method.timeframe}
      </div>
    </Link>
  );
}