"use client";

import React from "react";
import { useTranslation } from "react-i18next";
import BoldIcon from "@/components/ui/BoldIcon";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Cart {
  image: string;
  title: string;
  price: number;
  discountedPrice: number;
  score: number;
  monetaryUnit: string;
  heartStyle?: string;
  style?: string;
}

export default function ProductCart(props: Cart) {
  const { t } = useTranslation("common");

  const discount =
    props.discountedPrice > 0
      ? Math.floor(100 - props.discountedPrice / (props.price / 100))
      : 0;

  return (
    <Card
      className={cn(
        "group relative w-[240px] max-laptop-xl:w-[210px] max-Wide-mobile-2xl:w-[180px] dark:bg-neutral-800  overflow-hidden border hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col",
        props.style
      )}
    >
      {/* Image Section */}
      <CardHeader className="p-0 relative">
        <img
          src={props.image}
          alt="product"
          className="h-52 max-laptop-xl:h-40 max-Wide-mobile-2xl:h-36 w-full object-contain 
             bg-white dark:bg-neutral-800 
             transition-transform duration-300 group-hover:scale-105 rounded-xl"
        />

        {/* Discount Badge */}
        {discount > 0 && (
          <Badge className="absolute top-2 right-2 bg-cyan-500 text-white dark:bg-neutral-600 shadow-md">
            -{discount}%
          </Badge>
        )}

        <div className="absolute top-2 left-2 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition">
          <Button
            size="icon"
            variant="secondary"
            className="rounded-full bg-white/80 dark:bg-neutral-800/80 backdrop-blur hover:bg-red-500 hover:text-white"
          >
            <BoldIcon name="heart" size={16} tinted className="text-red-500 dark:text-red-400" />
          </Button>
          <Button
            size="icon"
            variant="secondary"
            className="rounded-full bg-white/80 dark:bg-neutral-800/80 backdrop-blur hover:bg-cyan-500 hover:text-white"
          >
            <BoldIcon name="share" size={16} tinted className="text-cyan-500 dark:text-cyan-400" />
          </Button>
        </div>
      </CardHeader>

      {/* Product Info */}
      <CardContent className="flex flex-col flex-1 justify-between p-3">
        <p className="line-clamp-2 text-sm font-semibold text-neutral-800 dark:text-neutral-200">
          {props.title}
        </p>

        <div className="flex items-center justify-between mt-3">
          <div>
            <div className="text-neutral-500 flex items-center gap-1 rtl:flex-row-reverse text-sm">
              <span>{props.monetaryUnit}</span>
              <span
                className={cn(
                  props.discountedPrice
                    ? "line-through text-neutral-400"
                    : "text-neutral-800 font-bold"
                )}
              >
                {props.price.toLocaleString()}
              </span>
            </div>
            {props.discountedPrice > 0 && (
              <div className="text-black dark:text-white font-bold flex items-center gap-1 rtl:flex-row-reverse text-sm">
                <span>{props.monetaryUnit}</span>
                <span>{props.discountedPrice.toLocaleString()}</span>
              </div>
            )}
          </div>

          {/* Rating */}
          <div className="flex items-center gap-1 text-yellow-500 text-sm font-medium">
            <BoldIcon name="star" size={16} tinted className="text-yellow-500" />
            <span className="ml-1 text-sm text-neutral-600 dark:text-neutral-400">
              {props.score.toFixed(1)}
            </span>
          </div>
        </div>
      </CardContent>

      {/* Footer CTA */}
      <CardFooter className="p-3 pt-0">
        <Button className="w-full bg-cyan-500 hover:bg-cyan-600 dark:bg-neutral-500 dark:hover:bg-neutral-600 text-white font-semibold">
          {t("Interest.productCartBtnValue")}
        </Button>
      </CardFooter>
    </Card>
  );
}
