"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Trash, PlusCircle } from "lucide-react";

interface PricingTiersProps {
  pricing: any[];
  handleTierChange: (
    e: React.ChangeEvent<HTMLInputElement>,
    index: number
  ) => void;
  handleRemoveTier: (index: number) => void;
  handleAddTier: () => void;
}

export const PricingTiers = ({
  pricing,
  handleTierChange,
  handleRemoveTier,
  handleAddTier,
}: PricingTiersProps) => (
  <div>
    <h3 className="text-sm font-medium">Tiered Pricing</h3>

    {pricing?.length > 0 ? (
      pricing.map((tier, index) => (
        <div key={tier._id || index} className="flex items-center gap-2 mt-2">
          <Input
            name="minQuantity"
            type="number"
            placeholder="Min Quantity"
            value={tier.minQuantity === 0 ? "" : tier.minQuantity} // ✅ Show empty string when 0
            onChange={(e) => handleTierChange(e, index)}
            className="h-8 text-sm px-2 flex-1"
          />

          <Input
            name="pricePerUnit"
            type="number"
            placeholder="Price per unit"
            value={tier.pricePerUnit === 0 ? "" : tier.pricePerUnit} // ✅ Show empty string when 0
            onChange={(e) => handleTierChange(e, index)}
            className="h-8 text-sm px-2 flex-1"
          />
          <Button
            variant="ghost"
            size="icon"
            className="text-red-500 hover:bg-red-100"
            onClick={() => handleRemoveTier(index)}
          >
            <Trash className="h-5 w-5" />
          </Button>
        </div>
      ))
    ) : (
      <p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p>
    )}

    <Button
      variant="outline"
      size="sm"
      className="mt-2"
      onClick={handleAddTier}
    >
      <PlusCircle className="w-4 h-4 mr-1" />
      Add Tier
    </Button>
  </div>
);