"use client"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Award, Check, ChevronRight, Clock, Shuffle, Star, User } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { useState } from "react"; interface ProviderInfo { name: string; specialty: string; avatar?: string; rating: number; reviews: number; experience: string; availability: string; availableToday?: boolean; } interface Booking5Labels { anyProviderTitle?: string; anyProviderDescription?: string; availableTodayBadge?: string; noSelection?: string; anyProviderSummary?: string; nextButton?: string; } interface Booking5Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; providers?: ProviderInfo[]; allowAny?: boolean; labels?: Booking5Labels; className?: string; } export const booking5Demo: Booking5Props = { badge: { label: "Step 2 of 3", variant: "secondary" }, heading: "Choose your specialist", description: "Pick a provider for your Deep Tissue Massage appointment.", allowAny: true, providers: [ { name: "Dr. Emily Carter", specialty: "Sports & Deep Tissue", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop", rating: 4.9, reviews: 127, experience: "8 years", availability: "Next: Today, 2:00 PM", availableToday: true, }, { name: "Marcus Chen", specialty: "Therapeutic & Recovery", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", rating: 4.8, reviews: 94, experience: "12 years", availability: "Next: Tomorrow, 10:00 AM", availableToday: false, }, { name: "Sofia Andersson", specialty: "Relaxation & Prenatal", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop", rating: 5.0, reviews: 203, experience: "15 years", availability: "Next: Today, 4:30 PM", availableToday: true, }, { name: "James Okafor", specialty: "Deep Tissue & Myofascial", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop", rating: 4.7, reviews: 68, experience: "5 years", availability: "Next: April 18, 9:00 AM", availableToday: false, }, ], labels: { anyProviderTitle: "Any Available Provider", anyProviderDescription: "We'll match you with the next available specialist", availableTodayBadge: "Today", noSelection: "No provider selected", anyProviderSummary: "Any Provider", nextButton: "Next Step", }, }; export function Booking5({ badge, heading, description, providers = [], allowAny = false, labels = {}, className, }: Booking5Props) { const { anyProviderTitle, anyProviderDescription, availableTodayBadge, noSelection, anyProviderSummary, nextButton, } = labels; const [selected, setSelected] = useState(null); const selectedProvider = selected && selected !== "any" ? providers.find((p) => p.name === selected) : null; const handleConfirm = () => { if (!selected) return; if (selected === "any") { console.log("Selected provider: any available"); } else if (selectedProvider) { console.log("Selected provider:", selectedProvider); } }; return (

{(badge || heading || description) && (

{badge && (

{badge.label}

)} {heading && (

)} {description && (
{description}
)}

)}

{allowAny && ( )} {providers.map((provider, index) => { const isSelected = selected === provider.name; return ( ); })}

{selected ? ( {selected === "any" ? anyProviderSummary : selected} ) : ( {noSelection} )}

); }

)} {description && (
{description}
)}

{anyProviderTitle}

{provider.name}

)} {description && ( {description} )}

{anyProviderTitle}

{provider.name}

)} {description && (
{description}
)}

Marketing - Book A Demo Blocks

Select an Item to view its code