type RegistrationType = "performer" | "watcher";

interface Props {
	onSelect: (type: RegistrationType) => void;
}

export function TypeSelector({ onSelect }: Props) {
	return (
		<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
			{/* Performer card */}
			<button
				type="button"
				onClick={() => onSelect("performer")}
				className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
			>
				<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-amber-400 to-orange-500 opacity-80" />
				<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-amber-400/15 text-amber-300">
					<svg
						className="h-7 w-7"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						strokeWidth={1.5}
						aria-hidden="true"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
						/>
					</svg>
				</div>
				<h3 className="mb-3 font-['Intro',sans-serif] text-2xl text-white md:text-3xl">
					Ik wil optreden
				</h3>
				<p className="mb-6 text-white/70">
					Deel jouw talent met het publiek. Muziek, theater, dans, comedy —
					alles is welkom. Je moet 16 jaar of ouder zijn.
				</p>
				<div className="mt-auto flex items-center gap-2 font-medium text-amber-300 text-sm">
					<span>Inschrijven als artiest</span>
					<svg
						className="h-4 w-4 transition-transform group-hover:translate-x-1"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						strokeWidth={2}
						aria-hidden="true"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
						/>
					</svg>
				</div>
			</button>

			{/* Watcher card */}
			<button
				type="button"
				onClick={() => onSelect("watcher")}
				className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
			>
				<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-400 to-cyan-400 opacity-80" />
				<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-teal-400/15 text-teal-300">
					<svg
						className="h-7 w-7"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						strokeWidth={1.5}
						aria-hidden="true"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"
						/>
					</svg>
				</div>
				<h3 className="mb-3 font-['Intro',sans-serif] text-2xl text-white md:text-3xl">
					Ik wil komen kijken
				</h3>
				<p className="mb-4 text-white/70">
					Geniet van een avond vol talent en kunst. Je betaald 5EUR inkom dat je
					mag gebruiken op je drinkkaart.
				</p>
				<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-teal-400/40 bg-teal-400/10 px-4 py-1.5">
					<span className="font-semibold text-sm text-teal-300">
						Drinkkaart 5 EUR te betalen bij registratie
					</span>
				</div>
				<div className="mt-auto flex items-center gap-2 font-medium text-sm text-teal-300">
					<span>Inschrijven als bezoeker</span>
					<svg
						className="h-4 w-4 transition-transform group-hover:translate-x-1"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						strokeWidth={2}
						aria-hidden="true"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
						/>
					</svg>
				</div>
			</button>
		</div>
	);
}
