import Image from "next/image";
import Link from "next/link";
import type { Post } from "@/data/posts";

export default function PostCard({ post }: { post: Post }) {
  return (
    <Link
      href={`/blog/${post.slug}`}
      className="group flex flex-col rounded-2xl border border-black/5 bg-white overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
    >
      <div className="relative aspect-[16/10] bg-surface">
        <Image
          src={post.cover}
          alt={post.title}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-500"
          sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
        />
        <span className="absolute top-3 right-3 rounded-full bg-white/90 backdrop-blur px-3 py-1 text-xs font-semibold text-primary">
          {post.category}
        </span>
      </div>
      <div className="flex flex-1 flex-col p-5">
        <div className="flex items-center gap-3 text-xs text-foreground/70">
          <span>{post.date}</span>
          <span className="h-1 w-1 rounded-full bg-foreground/30" />
          <span>{post.readingTime}</span>
        </div>
        <h3 className="mt-3 font-bold text-secondary leading-7 line-clamp-2">
          {post.title}
        </h3>
        <p className="mt-2 text-sm leading-6 text-foreground line-clamp-2 flex-1">
          {post.excerpt}
        </p>
        <span className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-primary">
          ادامه مطلب
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            className="rotate-180 group-hover:-translate-x-1 transition-transform"
          >
            <path
              d="M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 1 1-1.4-1.4L18 12.7H4a1 1 0 1 1 0-2h14L13.3 6.7a1 1 0 0 1 0-1.4Z"
              fill="currentColor"
            />
          </svg>
        </span>
      </div>
    </Link>
  );
}
