edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx

import {
  CheckCircle,
  ClipboardCheck,
  FileSignature,
  Inbox,
  LayoutGrid,
  Train,
  Wallet,
  XCircle,
} from "lucide-react";
import { Group, Badge, UnstyledButton, Text } from "@mantine/core";

import {
  BOOKING_LIST_TABS,
  type BookingStatusTabKey,
} from "@/features/bookings/booking-status.config";

const TAB_ICONS: Record<BookingStatusTabKey, React.ReactNode> = {
  all: <LayoutGrid size={18} strokeWidth={1.75} />,
  intake: <Inbox size={18} strokeWidth={1.75} />,
  in_approval: <ClipboardCheck size={18} strokeWidth={1.75} />,
  approved_contract: <FileSignature size={18} strokeWidth={1.75} />,
  payment: <Wallet size={18} strokeWidth={1.75} />,
  operations: <Train size={18} strokeWidth={1.75} />,
  completed: <CheckCircle size={18} strokeWidth={1.75} />,
  closed: <XCircle size={18} strokeWidth={1.75} />,
};

interface BookingStatusTabsProps {
  active: BookingStatusTabKey;
  onChange: (tab: BookingStatusTabKey) => void;
  counts?: Partial<Record<BookingStatusTabKey, number>>;
}

export function BookingStatusTabs({
  active,
  onChange,
  counts,
}: BookingStatusTabsProps) {
  return (
    <Group
      gap="sm"
      wrap="wrap"
      p="md"
      style={{
        background: "var(--mantine-color-gray-0)",
        borderRadius: "12px",
        border: "1px solid var(--mantine-color-gray-2)",
      }}
    >
      {BOOKING_LIST_TABS.map((tab) => {
        const isActive = active === tab.key;
        const count = counts?.[tab.key];
        return (
          <UnstyledButton
            key={tab.key}
            onClick={() => onChange(tab.key)}
            style={{
              background: isActive ? "white" : "transparent",
              border: isActive ? "1px solid var(--mantine-color-green-3)" : "1px solid var(--mantine-color-gray-2)",
              borderRadius: "10px",
              padding: "10px 16px",
              transition: "all 0.2s ease",
              cursor: "pointer",
              boxShadow: isActive ? "0 2px 8px rgba(34, 197, 94, 0.1)" : "none",
            }}
          >
            <Group gap="sm" justify="space-between" wrap="nowrap">
              <Group gap={8}>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    width: "32px",
                    height: "32px",
                    borderRadius: "8px",
                    background: isActive ? "var(--mantine-color-green-1)" : "var(--mantine-color-gray-1)",
                    color: isActive ? "var(--mantine-color-green-7)" : "var(--mantine-color-gray-6)",
                  }}
                >
                  {TAB_ICONS[tab.key]}
                </div>
                <Text size="sm" fw={600}>
                  {tab.label}
                </Text>
              </Group>
              {count !== undefined && count > 0 && (
                <Badge
                  size="sm"
                  variant={isActive ? "filled" : "light"}
                  color={isActive ? "green" : "gray"}
                  radius="lg"
                >
                  {count}
                </Badge>
              )}
            </Group>
          </UnstyledButton>
        );
      })}
    </Group>
  );
}

export type { BookingStatusTabKey };