import Link from "next/link";
import { DifficultyBadge } from "@/components/ui/DifficultyBadge";
import type { GuideMetadata } from "@/lib/content";

export const GuideCard = ({ guide }: { guide: GuideMetadata }) => (
  <Link
    href={`/guides/${guide.slug}`}
    className="group block rounded-lg border border-border bg-card p-5 transition-all hover:border-accent/50 hover:shadow-md hover:shadow-accent/5"
  >
    <div className="flex items-center gap-2 mb-2">
      <DifficultyBadge level={guide.difficulty} />
      <span className="text-xs text-muted-foreground">{guide.readingTime}</span>
    </div>
    <h3 className="font-semibold text-foreground group-hover:text-accent transition-colors mb-1">
      {guide.title}
    </h3>
    {guide.excerpt && (
      <p className="text-sm text-muted-foreground line-clamp-2">{guide.excerpt}</p>
    )}
    <div className="mt-3 text-xs text-muted-foreground">
      {guide.category}
    </div>
  </Link>
);
