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

type StoryCardProps = {
  title: string;
  slug: string;
  description: string;
  image?: string;
  location?: string;
  tag?: string;
};

export default function StoryCard({
  title,
  slug,
  description,
  image = "/stories/default.webp",
  location = "India",
  tag = "Success Story",
}: StoryCardProps) {
  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 h-full">
        <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">
            {tag}
          </span>
        </div>

        <div className="flex min-h-[250px] flex-col p-5 sm:p-6">
          <div className="mb-4 flex flex-wrap gap-4 text-xs font-semibold text-slate-500">
            <span className="inline-flex items-center gap-2">
              <FaHeart className="text-[var(--accent-hover)]" />
              Community Impact
            </span>

            <span className="inline-flex items-center gap-2">
              <FaMapMarkerAlt className="text-[var(--accent-hover)]" />
              {location}
            </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">
            {description}
          </p>

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