"use client";
import Button from "@/app/components/Button";
import ProductImage from "@/assets/images/product_image.png";
import Image from "next/image";
import { type FC } from "react";
import { Rating } from "react-simple-star-rating";

type ProductCardProps = {
  title?: string;
};

const ProductCard: FC<ProductCardProps> = ({ title = "جعبه کیبوردی" }) => {
  return (
    <div>
      <div className="rounded-xl overflow-hidden">
        <Image src={ProductImage} alt={title} width={500} height={500} className="w-full aspect-square object-cover" />
      </div>
      <div className="relative bg-white p-4 rounded-xl -mt-6 shadow-[0_4px_20px_rgba(0,0,0,0.1)]">
        <div className="text-[#2A3950] font-bold text-center">{title}</div>
        <div className="mt-2 flex justify-center items-center gap-1.5">
          <Rating initialValue={4.5} size={20} readonly rtl allowFraction SVGstyle={{ display: "inline-block" }} />
          <div className="text-xs mt-1">4.5</div>
        </div>
        <div className="mt-2 text-[#0A1B2C8F]/56 text-sm text-center">قیمت از </div>
        <div className="flex gap-1.5 items-center justify-center">
          <div className="text-[#0A1B2C8F]/56 line-through decoration-[#D00003] text-[10px]">10,000,000</div>
          <div className="text-sm">1,000,000 تومان</div>
        </div>
        <div className="mt-3 px-4">
          <Button variant="outline" className="h-8 w-full">
            جزییات
          </Button>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;