"use client";

import Image from "next/image";
import Link from "next/link";
import dineoutImg from "@/assets/images/dineout_card.png";
import cateringImg from "@/assets/images/catering_card.png";

interface QuickServiceCardsProps {
  restaurantId?: string;
  isDineOut?: boolean;
  cateringServices?: boolean;
}

export default function QuickServiceCards({
  restaurantId,
  isDineOut,
  cateringServices,
}: QuickServiceCardsProps) {
  const allServices = [
    {
      key: "dineout" as const,
      title: "Dineout",
      description: "Dine-Out Experiences for Every Occasion.",
      image: dineoutImg,
      bgColor: "bg-[#EBCEB6]",
      link: restaurantId ? `/dineout/${restaurantId}` : "/dineout",
    },
    {
      key: "catering" as const,
      title: "Catering",
      description: "Catering Made for Your Celebrations.",
      image: cateringImg,
      bgColor: "bg-[#FFFFD5]",
      link: restaurantId ? `/catering/${restaurantId}` : "/catering",
    },
  ];

  const services = restaurantId
    ? allServices.filter((service) => {
      if (service.key === "dineout") return isDineOut === true;
      if (service.key === "catering") return cateringServices === true;
      return false;
    })
    : allServices;

  if (services.length === 0) return null;

  return (
    <section className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8 px-4 max-w-7xl mx-auto">
      {services.map((service, index) => (
        <Link
          key={index}
          href={service.link}
          className={`${service.bgColor} relative rounded-3xl p-6 md:p-8 flex flex-col items-start justify-between overflow-hidden group hover:shadow-lg transition-all duration-300 min-h-[180px] md:min-h-[200px] border border-gray-100/50`}
        >
          {/* Top Right Arrow Button */}
          <div className="absolute top-4 right-4 z-20">
            <div className="w-10 h-10 bg-primary rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="text-white"
              >
                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
          </div>

          <div className="flex-1 z-10 pr-12">
            <h3 className="text-2xl md:text-3xl font-extrabold text-gray-900 mb-2">
              {service.title}
            </h3>
            <p className="text-xs md:text-sm text-gray-600 line-clamp-2 max-w-[180px] md:max-w-[220px]">
              {service.description}
            </p>
          </div>

          <div className="absolute right-0 bottom-0 w-[45%] h-full flex items-end justify-end pointer-events-none translate-y-4 translate-x-4 group-hover:translate-y-0 group-hover:translate-x-0 transition-transform duration-500">
            <div className="relative w-full h-[70%] md:h-[80%]">
              <Image
                src={service.image}
                alt={service.title}
                fill
                className="object-contain object-right-bottom drop-shadow-xl"
              />
            </div>
          </div>
        </Link>
      ))}
    </section>
  );
}