"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { Clock, Crown } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import type { ArticleCardData } from "@/lib/types";

interface GuideCardProps {
  article: ArticleCardData;
  index?: number;
}

export function GuideCard({ article, index = 0 }: GuideCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.4, delay: index * 0.05 }}
    >
      <Link href={`/guides/${article.slug}`}>
        <Card className="group overflow-hidden border-border bg-card transition-all hover:border-primary/40 hover:glow-gold">
          <div className="relative aspect-[16/9] overflow-hidden">
            <Image
              src={article.coverImage}
              alt={article.title}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            />
          </div>
          <CardContent className="p-4">
            <div className="flex flex-wrap items-center gap-2">
              <Badge variant="outline" className="border-primary/50 text-primary">
                {article.category}
              </Badge>
              {article.accessLevel === "member" && (
                <Badge variant="outline" className="border-primary/50 text-primary">
                  <Crown className="mr-1 size-3" />
                  會員
                </Badge>
              )}
              <span className="flex items-center gap-1 text-xs text-muted-foreground">
                <Clock className="size-3" />
                {article.readTime} 分鐘
              </span>
            </div>
            <h3 className="mt-2 font-semibold leading-snug group-hover:text-primary">
              {article.title}
            </h3>
            <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
              {article.excerpt}
            </p>
          </CardContent>
        </Card>
      </Link>
    </motion.div>
  );
}