mehraein-front/app/product/components/ProductPurchaseOptions.tsx

"use client";

import Select from "@/app/components/Select";
import { cn } from "@/app/lib/cn";
import { InfoCircle } from "iconsax-reactjs";
import { type FC } from "react";
import { Rating } from "react-simple-star-rating";
import { BOX_BAND_OPTIONS, formatPrice, PAPER_TYPE_OPTIONS, PRODUCT_PACKAGE_SIZE, PRODUCT_RATING, PRODUCT_SHORT_DESCRIPTION, PRODUCT_TITLE, QUANTITY_TIERS, type QuantityTier } from "../constants";

type ProductPurchaseOptionsProps = {
  selectedTier: QuantityTier;
  onSelectTier: (tier: QuantityTier) => void;
};

const ProductPurchaseOptions: FC<ProductPurchaseOptionsProps> = ({ selectedTier, onSelectTier }) => {
  return (
    <div className="flex w-full min-w-0 flex-1 flex-col gap-4">
      <div className="w-full space-y-2 text-right">
        <h1 className="text-xl font-bold text-[#0A1B2C] sm:text-2xl">{PRODUCT_TITLE}</h1>

        <div className="flex items-center justify-end gap-2">
          <Rating initialValue={PRODUCT_RATING} size={16} readonly rtl allowFraction SVGstyle={{ display: "inline-block" }} />
          <span className="text-sm font-medium text-[#0A1B2C]">{PRODUCT_RATING}</span>
        </div>
      </div>

      <p className="w-full whitespace-pre-line text-right text-xs leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">{PRODUCT_SHORT_DESCRIPTION}</p>

      <div className="w-full space-y-0.5 text-right">
        <p className="text-base font-bold text-[#0A1B2C] sm:text-lg">{formatPrice(selectedTier.totalPrice)}﷼</p>
        <p className="text-xs text-[#4D4D4D] sm:text-sm">
          {formatPrice(selectedTier.unitPrice)}﷼ برای هر عدد ( بسته {formatPrice(PRODUCT_PACKAGE_SIZE)} عددی)
        </p>
      </div>

      <div className="w-full space-y-3">
        <Field label="جنس ورق">
          <Select options={[...PAPER_TYPE_OPTIONS]} defaultValue={PAPER_TYPE_OPTIONS[0].value} className="h-10 rounded-xl border-[#E9EEF2] text-sm" />
        </Field>

        <Field label="بند جعبه">
          <Select options={[...BOX_BAND_OPTIONS]} defaultValue={BOX_BAND_OPTIONS[0].value} className="h-10 rounded-xl border-[#E9EEF2] text-sm" />
        </Field>

        <div className="space-y-1.5">
          <span className="block text-right text-xs font-medium text-[#0A1B2C] sm:text-sm">تعداد</span>

          <div className="space-y-1.5">
            {QUANTITY_TIERS.map((tier) => {
              const isSelected = selectedTier.quantity === tier.quantity;

              return (
                <button
                  key={tier.quantity}
                  type="button"
                  onClick={() => onSelectTier(tier)}
                  className={cn(
                    "flex min-h-10 w-full items-center justify-between gap-1.5 rounded-xl border border-[#E9EEF2] px-2.5 transition-colors sm:gap-2 sm:px-3",
                    isSelected ? "bg-secondary" : "bg-white hover:bg-secondary/50",
                  )}
                >
                  <span className="hidden w-6 shrink-0 text-end text-xs font-medium text-[#0A1B2C] sm:inline">{tier.quantity}</span>

                  <div className="flex min-w-0 flex-1 items-center justify-between gap-1.5 sm:justify-center sm:gap-2">
                    <span className="text-[10px] text-[#0A1B2C] sm:text-xs">{formatPrice(tier.unitPrice)}﷼ / هر عدد</span>
                    <span className="text-[11px] font-medium text-[#0A1B2C] sm:text-xs">{formatPrice(tier.totalPrice)}﷼</span>
                  </div>
                  <span className={cn("w-8 shrink-0 text-start text-[10px] font-medium sm:w-6 sm:text-xs", tier.discount ? "text-[#DC0000]" : "text-[#0A1B2C]")}>
                    {tier.discount ? `-${tier.discount}%` : tier.quantity}
                  </span>
                </button>
              );
            })}
          </div>

          <button type="button" className="flex items-center gap-1 text-[11px] text-[#21588C] sm:text-xs">
            <InfoCircle size={14} color="currentColor" variant="Linear" />
            تعداد بیشتر
          </button>
        </div>
      </div>
    </div>
  );
};

type FieldProps = {
  label: string;
  children: React.ReactNode;
};

const Field: FC<FieldProps> = ({ label, children }) => (
  <div className="space-y-1.5">
    <span className="block text-right text-xs font-medium text-[#0A1B2C] sm:text-sm">{label}</span>
    {children}
  </div>
);

export default ProductPurchaseOptions;