"use client";
import { useState } from "react";
import Image from "next/image";
import { ShoppingCart } from "lucide-react";
import { cn } from "@/lib/utils";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
interface AddOnItem {
id: string;
name: string;
description: string;
price: number;
image: string;
}
interface UpsellBundleBuilderProps {
product: {
id: string;
name: string;
description: string;
price: number;
image: string;
};
addOns: AddOnItem[];
}
export default function UpsellBundleBuilder({
product = {
id: "main-product",
name: "Premium Wireless Headphones",
description:
"Studio-quality sound with active noise cancellation and 30-hour battery life.",
price: 199.99,
image: "/placeholder.svg?height=200&width=200",
},
addOns = [
{
id: "addon-1",
name: "Protective Case",
description:
"Durable hardshell case with water-resistant exterior and custom fit.",
price: 29.99,
image: "/placeholder.svg?height=100&width=100",
},
{
id: "addon-2",
name: "Extended Warranty",
description:
"Additional 2-year coverage for accidental damage and technical support.",
price: 39.99,
image: "/placeholder.svg?height=100&width=100",
},
{
id: "addon-3",
name: "Premium Audio Cable",
description:
"Gold-plated 3.5mm audio cable for lossless wired listening experience.",
price: 19.99,
image: "/placeholder.svg?height=100&width=100",
},
{
id: "addon-4",
name: "Wireless Charging Pad",
description:
"Fast-charging Qi wireless charging pad compatible with your headphones.",
price: 34.99,
image: "/placeholder.svg?height=100&width=100",
},
],
}: UpsellBundleBuilderProps) {
const [selectedAddOns, setSelectedAddOns] = useState<Record<string, boolean>>(
{},
);
const handleToggleAddOn = (id: string) => {
setSelectedAddOns((prev) => ({
...prev,
[id]: !prev[id],
}));
};
const calculateTotal = () => {
const addOnsTotal = addOns.reduce((sum, addon) => {
return sum + (selectedAddOns[addon.id] ? addon.price : 0);
}, 0);
return product.price + addOnsTotal;
};
const selectedCount = Object.values(selectedAddOns).filter(Boolean).length;
return (
<div className="mx-auto w-full max-w-3xl px-4 py-8 md:py-12">
{}
<Card className="mb-6 border-2">
<CardHeader className="pb-3">
<div className="flex flex-col items-start gap-4 md:flex-row">
<div className="bg-muted relative aspect-square w-full overflow-hidden rounded-md md:w-1/3">
<Image
src={product.image || "/placeholder.svg"}
alt={product.name}
fill
className="object-cover"
/>
</div>
<div className="flex-1">
<Badge variant="secondary" className="mb-2">
Base Product
</Badge>
<CardTitle className="text-xl md:text-2xl">
{product.name}
</CardTitle>
<CardDescription className="mt-2 text-sm md:text-base">
{product.description}
</CardDescription>
</div>
<div className="text-xl font-bold md:text-2xl">
${product.price.toFixed(2)}
</div>
</div>
</CardHeader>
</Card>
{}
<div className="mb-6">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-medium">Customize Your Bundle</h3>
<span className="text-muted-foreground text-sm">
{selectedCount} add-on{selectedCount !== 1 ? "s" : ""} selected
</span>
</div>
<div className="space-y-4">
{addOns.map((addon) => (
<Card
key={addon.id}
className={cn(
"hover:border-primary/50 border transition-all",
selectedAddOns[addon.id]
? "border-primary/50 bg-primary/5"
: "",
)}
>
<CardContent className="p-4">
<div className="flex items-center gap-4">
<div className="bg-muted relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md">
<Image
src={addon.image || "/placeholder.svg"}
alt={addon.name}
fill
className="object-cover"
/>
</div>
<div className="min-w-0 flex-1">
<h4 className="truncate font-medium">{addon.name}</h4>
<p className="text-muted-foreground line-clamp-2 text-sm">
{addon.description}
</p>
</div>
<div className="flex flex-col items-end gap-2">
<span className="font-medium">
${addon.price.toFixed(2)}
</span>
<Switch
checked={selectedAddOns[addon.id] || false}
onCheckedChange={() => handleToggleAddOn(addon.id)}
aria-label={`Add ${addon.name} to bundle`}
/>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
{}
<Card className="sticky bottom-0 border-t shadow-lg">
<CardContent className="p-4">
<div className="flex flex-col items-center justify-between gap-4 md:flex-row">
<div>
<p className="text-muted-foreground text-sm">Bundle Total</p>
<p className="text-2xl font-bold">
${calculateTotal().toFixed(2)}
</p>
</div>
<div className="w-full md:w-auto">
<Button size="lg" className="w-full md:w-auto">
<ShoppingCart className="mr-2 h-4 w-4" />
Add Bundle to Cart
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
);
}