import Link from "next/link";
import Image from "next/image";
import { Calendar, Clock, ArrowLeft } from "lucide-react";
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";

interface BlogCardProps {
  slug: string;
  title: string;
  excerpt: string;
  date: string;
  readTime: string;
  category: string;
  image: string;
}

export function BlogCard({
  slug,
  title,
  excerpt,
  date,
  readTime,
  category,
  image,
}: BlogCardProps) {
  return (
    <Link href={`/blog/${slug}`} className="group block h-full">
      <Card className="h-full flex flex-col overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1 dark:border-transparent">
        {/* Image with 3:2 aspect ratio */}
        <div className="relative aspect-[5/3] w-full overflow-hidden bg-muted">
          <Image
            src={image}
            alt={title}
            fill
            className="object-cover transition-transform duration-300 group-hover:scale-105"
            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
          />
          {/* Category Badge */}
          <div className="absolute top-4 right-4">
            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/90 text-primary-foreground backdrop-blur-sm">
              {category}
            </span>
          </div>
        </div>

        <CardHeader className="flex-1 flex flex-col">
          <h3 className="text-base py-2 font-bold leading-tight tracking-normal group-hover:text-primary transition-colors line-clamp-2">
            {title}
          </h3>
        </CardHeader>

        <CardContent className="flex-1">
          <p className="text-muted-foreground leading-relaxed tracking-normal line-clamp-3 text-sm">
            {excerpt}
          </p>
        </CardContent>

        <CardFooter className="flex items-center justify-between gap-4 text-xs text-muted-foreground border-t pt-4">
          <div className="flex items-center gap-2">
            <Calendar className="size-4" />
            <span>{date}</span>
          </div>
          <div className="flex items-center gap-2">
            <Clock className="size-4" />
            <span>{readTime} دقیقه</span>
          </div>
        </CardFooter>
      </Card>
    </Link>
  );
}