47 lines
1.1 KiB
TypeScript

'use client';
import { usePushWithData } from '@/hooks/url';
import { CalendarPlus } from 'lucide-react';
type BookButtonProps = {
clientId?: string;
disabled?: boolean;
label: string;
masterId: string;
onBooked?: () => void;
};
export function BookButton({
clientId,
disabled,
label,
masterId,
onBooked,
}: Readonly<BookButtonProps>) {
const push = usePushWithData();
const handleBook = () => {
push('/orders/add', {
...(clientId && { client: { documentId: clientId } }),
slot: { master: { documentId: masterId } },
});
onBooked?.();
};
if (!masterId && !clientId) return null;
return (
<div className="flex flex-col items-center justify-center">
<button
className="flex items-center justify-center gap-2 self-center rounded-xl bg-primary/5 px-6 py-2 font-semibold text-primary shadow-sm transition-colors hover:bg-primary/10"
disabled={disabled}
onClick={handleBook}
type="button"
>
<CalendarPlus className="size-5 text-primary" />
<span>{label}</span>
</button>
</div>
);
}