import discountRed from "~/assets/icons/product/discount-red.svg";
import { ProductDetail } from "src/api/types";

interface ProductInfoProps {
  product: ProductDetail;
  productDiscountPercent: number;
}

export const ProductInfo = ({
  product,
  productDiscountPercent,
}: ProductInfoProps) => (
  <div className="flex flex-col gap-2 mt-8 px-4">
    <div className="flex gap-3 items-center">
      {productDiscountPercent && productDiscountPercent > 0 ? (
        <div className="flex gap-[2px] items-center">
          <p className="text-B14 font-bold text-RED mt-1">
            {productDiscountPercent || "0"}
          </p>
          <img src={discountRed} alt="discount-red" className="w-6 h-6" />
        </div>
      ) : null}
      {productDiscountPercent && productDiscountPercent > 0 ? (
        <div className="w-[6px] h-[6px] rounded-full bg-BLACK" />
      ) : null}
      <p className="text-B18 font-bold">{product.title}</p>
    </div>
    <p className="text-R12 text-GRAY">{product.description}</p>
  </div>
);