"use client";

import React, { memo } from "react";
import Image from "next/image";
import Link from "next/link";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { AspectRatio } from "../ui/aspect-ratio";
import { formatCurrency } from "@/lib/format";
import { ProductDetails } from "@/types/product";

export type ProductRecommendationCarouselCardProps = {
  ImageLink: ProductDetails["image"];
  ProductName: ProductDetails["title"];
  ProductPrice: ProductDetails["price"];
  ProductId: ProductDetails["id"];
};

export const ProductRecommendationCarouselCard = memo(({
  ImageLink,
  ProductName,
  ProductPrice,
  ProductId,
}: ProductRecommendationCarouselCardProps) => {
  if (!ImageLink || !ProductName || !ProductPrice || !ProductId) {
    return;
  }

  return (
    <Link href={`/product/${ProductId}`} className="group block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg">
    <Card className="flex-col h-full hover:bg-accent/50 transition-colors">
      <AspectRatio ratio={1 / 1} className="bg-muted overflow-hidden rounded-t-lg">
        {/*
          ⚡ Optimization: Responsive Images
          Added 'sizes' to ensure Next.js serves appropriately scaled images.
          - Mobile (640px): 2 items per row -> 50vw
          - Tablet (1024px): 3 items per row -> 33vw
          - Desktop (>1024px): 5-6 items per row -> 20vw
          Expected Impact: ~60-80% reduction in image payload size on smaller screens.
        */}
        <Image
          src={ImageLink}
          alt={ProductName}
          fill
          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
          className="h-full w-full rounded-md object-cover group-hover:scale-105 transition-transform duration-300"
        />
      </AspectRatio>

      <CardContent className="p-4">
        <CardHeader className="p-0">
          <CardTitle className="line-clamp-3 max-h-[4.5em] overflow-hidden text-ellipsis">
            {ProductName}
          </CardTitle>
        </CardHeader>
        <CardFooter className="font-bold text-lg p-2">
          {formatCurrency(ProductPrice)}
        </CardFooter>
        <CardDescription className="text-green-600 font-bold p-1.5">
          Kostenloser Versand
        </CardDescription>
      </CardContent>
    </Card>
    </Link>
  );
});

ProductRecommendationCarouselCard.displayName = "ProductRecommendationCarouselCard";