import { Package, PackageOpen } from "lucide-react";
import { AppearancePreview } from "@/components/ui/appearance-preview";
import type { BundleCustomization, ProductBundleSettings } from "../config";
import { ProductBundlesPreview } from "./product-bundles-preview";

export function BundlePreviewPanel({
  customization,
  settings,
  isPro,
}: {
  customization: BundleCustomization;
  settings: ProductBundleSettings;
  isPro: boolean;
}) {
  return (
    <AppearancePreview
      feature="Bundle"
      note="Sample products · USD · Never changes your cart"
      states={[
        { value: "ready", label: "Ready bundle", icon: Package },
        { value: "empty", label: "Empty bundle", icon: PackageOpen },
      ]}
    >
      {(state) => (
        <ProductBundlesPreview
          customization={{ ...customization, showStockQuantity: !isPro || customization.showStockQuantity }}
          settings={settings}
          allowQuantityControls={isPro}
          empty={state === "empty"}
        />
      )}
    </AppearancePreview>
  );
}