import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
import type { QuestionListItem } from "@/types";

interface QuestionCardProps {
  question: QuestionListItem;
}

export function QuestionCard({ question }: QuestionCardProps) {
  return (
    <Link
      href={`/questions/${question.slug}`}
      className="block p-4 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:border-[var(--primary)] transition-colors"
    >
      <div className="flex items-start justify-between gap-4 mb-3">
        <h3 className="font-semibold">{question.title}</h3>
        <Badge
          variant={getDifficultyVariant(question.difficulty)}
          aria-label={getDifficultyLabel(question.difficulty)}
        >
          {capitalize(question.difficulty)}
        </Badge>
      </div>

      <div className="flex flex-wrap gap-2 mb-3">
        {question.categories.map((cat) => (
          <Badge key={cat.id} variant="category">
            {cat.name}
          </Badge>
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-2 text-sm">
        {question.patterns.map((p) => (
          <Badge key={p.id} variant="pattern">
            {p.name}
          </Badge>
        ))}
        {question.leetcode_id && (
          <span className="text-[var(--muted-foreground)]">
            LeetCode #{question.leetcode_id}
          </span>
        )}
      </div>
    </Link>
  );
}