'use client';

import { useCustomerQuery } from '@/hooks/api/customers';
import { usePushWithData } from '@/hooks/url';
import { CalendarPlus } from 'lucide-react';

type BookButtonProps = {
  disabled?: boolean;
  label: string;
  onBooked?: () => void;
};

export function BookButton({ disabled, label, onBooked }: Readonly<BookButtonProps>) {
  const { data: { customer } = {} } = useCustomerQuery();
  const masterId = customer?.documentId;
  const push = usePushWithData();

  const handleBook = () => {
    push('/orders/add', {
      slot: { master: { documentId: masterId } },
    });
    onBooked?.();
  };

  if (!masterId) 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>
  );
}