"use client";

import Link from "next/link";
import { Offer } from "@/types/offer";
import { useLanguage } from "@/context/LanguageContext";

type OfferCardProps = {
  offer: Offer;
};

function formatPrice(value: number | string) {
  const numericValue = Number(value || 0);
  return Number.isInteger(numericValue)
    ? numericValue.toString()
    : numericValue.toFixed(2);
}

export default function OfferCard({ offer }: OfferCardProps) {
  const { lang, t } = useLanguage();
  const isAr = lang === "ar";
  const currencySymbol = offer.currency?.symbol || offer.currency?.main_symbol || "";

  return (
    <article
      dir={isAr ? "rtl" : "ltr"}
      className="group overflow-hidden rounded-[16px] border border-[#DCDCE6] bg-white shadow-[0_8px_24px_rgba(46,53,83,0.08)] transition duration-300 hover:shadow-[0_12px_28px_rgba(46,53,83,0.12)]"
    >
      <div className="p-4 pb-0">
        <div className="overflow-hidden rounded-[10px] border border-[#EEEAF0] bg-[#FAF7F9]">
          <img
            src={offer.image}
            alt={offer.name}
            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
          />
        </div>
      </div>

      <div className="px-4 pt-3 pb-4 text-center">
        <h3 className="mb-1 text-[18px] font-semibold leading-7 text-[#2E3553] line-clamp-1">
          {offer.name}
        </h3>

        <p className="mb-4 min-h-[44px] text-[13px] leading-6 text-[#6B7285] line-clamp-2">
          {offer.short_description || ""}
        </p>

        <div className="flex items-center justify-between gap-3">
          <Link
            href={`/offers/${offer.id}/customize`}
            className="inline-flex min-h-[38px] min-w-[112px] items-center justify-center rounded-full bg-[#FF3D8E] px-5 text-[13px] font-bold text-white shadow-[0_8px_16px_rgba(255,61,142,0.24)] transition hover:opacity-90"
          >
            {t("choose_photos")}
          </Link>

          <div className="inline-flex min-h-[38px] min-w-[78px] items-center justify-center rounded-full bg-[#FCE0EA] px-4 text-[22px] font-extrabold leading-none text-[#FF4F93]">
            <span className="text-[16px] font-bold ltr:mr-1 rtl:ml-1">{currencySymbol}</span>
            {formatPrice(offer.price)}
          </div>
        </div>
      </div>
    </article>
  );
}