'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>
  );
}