import type { LucideIcon } from 'lucide-react';
import { FieldLegend } from '@/components/ui/field';
import { cn } from '@/lib/utils';

type BookingFormSectionLegendProps = {
    icon: LucideIcon;
    title: string;
    className?: string;
};

export function BookingFormSectionLegend({
    icon: Icon,
    title,
    className,
}: BookingFormSectionLegendProps) {
    return (
        <FieldLegend
            variant="label"
            className={cn('mb-0 flex items-center gap-3', className)}
        >
            <span
                aria-hidden
                className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted"
            >
                <Icon className="size-4 text-muted-foreground" />
            </span>
            {title}
        </FieldLegend>
    );
}