aragrp/components/blog-card.tsx

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

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="#" className="group block h-full">
      <Card className="flex h-full flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">
        <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"
            quality={100}
            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 400px"
          />
          <div className="absolute top-4 right-4">
            <span
              className={cn(
                type.caption,
                "inline-flex items-center rounded-full bg-primary/90 px-3 py-1 font-medium text-primary-foreground backdrop-blur-sm"
              )}
            >
              {category}
            </span>
          </div>
        </div>

        <CardHeader className="flex flex-1 flex-col">
          <h3
            className={cn(
              type["card-title"],
              "py-2 font-bold transition-colors group-hover:text-primary line-clamp-2"
            )}
          >
            {title}
          </h3>
        </CardHeader>

        <CardContent className="flex-1">
          <p className={cn(type["card-desc"], "line-clamp-3")}>{excerpt}</p>
        </CardContent>

        <CardFooter
          className={cn(
            type.caption,
            "flex items-center justify-between gap-4 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>
  );
}