Ticket Tier Select

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { cn } from '@/lib/utils'
5import { Minus, Plus, Info } from 'lucide-react'
6import { useState } from 'react'
7import { demoTicketTiers } from './demo/events'
8 
9/**
10 * Formats a currency amount.
11 * @param {number} amount - Amount to format
12 * @param {string} currency - Currency code
13 * @returns {string} Formatted currency string
14 */
15function formatCurrency(amount: number, currency: string = 'USD'): string {
16  return new Intl.NumberFormat('en-US', {
17    style: 'currency',
18    currency,
19    minimumFractionDigits: 2
20  }).format(amount)
21}
22 
23/**
24 * Represents a ticket tier option.
25 * @interface TicketTier
26 * @property {string} [name] - Tier name (e.g., "General Admission", "VIP")
27 * @property {number} [price] - Base price
28 * @property {number} [fee] - Service fee
29 * @property {number} [available] - Number available
30 * @property {string} [salesEndDate] - When sales end
31 * @property {string} [description] - Tier description
32 * @property {number} [maxPerOrder] - Maximum tickets per order
33 */
34export interface TicketTier {
35  name?: string
36  price?: number
37  fee?: number
38  available?: number
39  salesEndDate?: string
40  description?: string
41  maxPerOrder?: number
42}
43 
44/**
45 * Represents a selected ticket with quantity.
46 * @interface TicketSelection
47 * @property {string} tierName - Tier name for display
48 * @property {number} quantity - Number of tickets
49 * @property {number} price - Base price per ticket
50 * @property {number} fee - Fee per ticket
51 */
52export interface TicketSelection {
53  tierName?: string
54  quantity: number
55  price?: number
56  fee?: number
57}
58 
59export interface TicketTierEvent {
60  title?: string
61  date?: string
62  image?: string
63  currency?: string
64}
65 
66/**
67 * ═══════════════════════════════════════════════════════════════════════════
68 * TicketTierSelectProps
69 * ═══════════════════════════════════════════════════════════════════════════
70 *
71 * Props for the TicketTierSelect component. Allows selection of multiple
72 * ticket tiers with quantity pickers and displays an order summary.
73 */
74export interface TicketTierSelectProps {
75  data?: {
76    /** Event information including title, date, and currency. */
77// … truncated