"use client";

import { memo } from "react";
import { m } from "framer-motion";
import Image from "next/image";

interface DishCardProps {
  dish: {
    name: string;
    img: string;
  };
  delay?: number;
  priority?: boolean;
}

const DishCard = memo(({ dish, delay = 0, priority = false }: DishCardProps) => (
  <m.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ delay, duration: 0.3 }}
    className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300"
  >
    {/* Image */}
    <div className="relative w-full h-[140px] xs:h-[165px] sm:h-[200px] md:h-[230px] overflow-hidden">
      <Image
        src={dish.img}
        alt={dish.name}
        fill
        loading={priority ? "eager" : "lazy"}
        priority={priority}
        sizes="(max-width: 480px) 50vw, (max-width: 768px) 50vw, 33vw"
        className="object-cover group-hover:scale-110 transition-transform duration-300"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
    </div>

    {/* Text */}
    <div className="p-3 text-center bg-[#E9500E] text-white">
      <p className="text-xs sm:text-sm md:text-base font-semibold tracking-wide truncate">
        {dish.name}
      </p>
    </div>
  </m.div>
));

export default DishCard;