edr-platform/apps/edr-freight-web/portal/src/components/NewBookingButton.tsx

import { Box, Button, Tooltip } from "@mantine/core";
import { Link } from "react-router-dom";
import { Lock, Plus } from "lucide-react";
import useAuth from "@/hooks/useAuth";

interface NewBookingButtonProps {
  label?: string;
  size?: string;
  mt?: string;
}

/**
 * New-booking entry point that respects approval status: a customer can only
 * create bookings once the backoffice has approved at least one operational
 * role. While every role is still pending the button is disabled with an
 * explanation, so the gate is communicated rather than failing at submit time.
 */
export function NewBookingButton({
  label = "New booking",
  size,
  mt,
}: NewBookingButtonProps) {
  const { canBook, hasPendingProfile } = useAuth();

  if (!canBook) {
    const message = hasPendingProfile
      ? "Your role is awaiting approval. You'll be able to create bookings as soon as it's approved."
      : "Bookings aren't available until one of your roles is approved.";
    return (
      <Tooltip label={message} multiline w={250} withArrow position="bottom-end">
        <Box mt={mt}>
          <Button
            color="edr-green"
            radius="md"
            size={size}
            disabled
            leftSection={<Lock size={16} />}
          >
            {label}
          </Button>
        </Box>
      </Tooltip>
    );
  }

  return (
    <Button
      component={Link}
      to="/bookings/new"
      color="edr-green"
      radius="md"
      size={size}
      mt={mt}
      leftSection={<Plus size={16} />}
    >
      {label}
    </Button>
  );
}