import Image from "next/image";
import Link from "next/link";
import { Badge } from "@/components/ui/Badge";
import { FallbackArt } from "@/components/ui/FallbackArt";
import type { Dictionary, Locale } from "@/content/types";
import type { Offer } from "@/generated/prisma/client";

export function OfferCard({
  offer,
  dict,
  locale,
}: {
  offer: Offer;
  dict: Dictionary;
  locale: Locale;
}) {
  const title = locale === "ar" ? offer.titleAr : offer.titleEn;
  const description = locale === "ar" ? offer.descriptionAr : offer.descriptionEn;

  return (
    <Link
      href={`/${locale}/offers/${offer.id}`}
      className="group flex flex-col overflow-hidden rounded-2xl border border-charcoal-950/5 bg-white shadow-sm shadow-charcoal-950/5 transition-shadow hover:shadow-lg"
    >
      <div className="relative aspect-[4/3] overflow-hidden">
        {offer.imageUrl ? (
          <Image
            src={offer.imageUrl}
            alt={title}
            fill
            sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
        ) : (
          <FallbackArt />
        )}
        {offer.featured ? (
          <span className="absolute start-3 top-3 rounded-full bg-gold-500 px-3 py-1 text-xs font-bold text-charcoal-950">
            {dict.offers.featured}
          </span>
        ) : null}
      </div>
      <div className="flex flex-1 flex-col gap-3 p-5">
        <Badge>{offer.category}</Badge>
        <h3 className="text-lg font-semibold text-charcoal-950">{title}</h3>
        <p className="line-clamp-2 flex-1 text-sm text-charcoal-400">{description}</p>
        <div className="flex items-center justify-between border-t border-charcoal-950/5 pt-3 text-sm">
          <span className="font-semibold text-charcoal-950">
            {dict.offers.from} {offer.price} {offer.currency}
          </span>
          <span className="text-charcoal-400">{offer.duration}</span>
        </div>
      </div>
    </Link>
  );
}