"use client";

import { Badge } from "@/components/ui/badge";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { CombinedDatePickerDemo } from "@/components/ui/combined-date-picker-demo";
import { useIsMobile } from "@/hooks/use-mobile";

export default function CombinedDatePickerDemoPage() {
	const isMobile = useIsMobile();

	return (
		<div
			className={
				isMobile
					? "mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-6 px-4 py-10"
					: "mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-6 px-8 py-10"
			}
		>
			<div className="flex flex-col gap-3">
				<Badge variant="outline" className="w-fit">
					Demo Route
				</Badge>
				<div className="space-y-2">
					<h1 className="text-3xl font-semibold tracking-tight">
						Date &amp; Time Picker
					</h1>
					<p
						className={
							isMobile
								? "max-w-2xl text-sm text-muted-foreground"
								: "max-w-2xl text-base text-muted-foreground"
						}
					>
						Inline date input paired with a locale-aware time picker. The return
						calendar disables dates before departure, and time fields switch
						between 24-hour and 12-hour formats automatically.
					</p>
				</div>
			</div>

			<Card>
				<CardHeader>
					<CardTitle>Flight booking</CardTitle>
					<CardDescription>
						Departure and return with date constraints and locale-aware time
						validation.
					</CardDescription>
				</CardHeader>
				<CardContent>
					<CombinedDatePickerDemo />
				</CardContent>
			</Card>
		</div>
	);
}
