import Image from "next/image";
import Link from "next/link";
import { FaArrowRight, FaCalendarAlt, FaUser } from "react-icons/fa";

type BlogCardProps = {
  title: string;
  slug: string;
  excerpt: string;
  image?: string;
  category?: string;
  author?: string;
  date?: string;
};

export default function BlogCard({
  title,
  slug,
  excerpt,
  image = "/blogs/default.webp",
  category = "NGO Blog",
  author = "Rajvi Social Welfare Trust",
  date = "2026",
}: BlogCardProps) {
  return (
    <article className="group h-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl">
      <Link href={slug} aria-label={title} className="block">
        <div className="relative h-52 w-full overflow-hidden bg-slate-100 sm:h-56">
          <Image
            src={image}
            alt={title}
            fill
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            className="object-cover transition duration-500 group-hover:scale-105"
          />

          <span className="absolute left-4 top-4 rounded-full bg-[var(--accent)] px-3 py-1 text-xs font-bold text-black">
            {category}
          </span>
        </div>

        <div className="flex min-h-[260px] flex-col p-5 sm:p-6">
          <div className="mb-4 flex flex-wrap gap-4 text-xs font-medium text-slate-500">
            <span className="inline-flex items-center gap-2">
              <FaUser className="text-[var(--accent-hover)]" />
              {author}
            </span>

            <span className="inline-flex items-center gap-2">
              <FaCalendarAlt className="text-[var(--accent-hover)]" />
              {date}
            </span>
          </div>

          <h3 className="text-lg font-extrabold leading-snug text-slate-950 transition group-hover:text-amber-600 sm:text-xl">
            {title}
          </h3>

          <p className="mt-3 flex-grow text-sm leading-7 text-slate-600">
            {excerpt}
          </p>

          <div className="mt-6 inline-flex items-center gap-2 text-sm font-bold text-amber-600">
            Read More
            <FaArrowRight className="text-xs transition group-hover:translate-x-1" />
          </div>
        </div>
      </Link>
    </article>
  );
}