edr-platform/apps/edr-freight-web/portal/src/pages/settings/OnboardingRoleSelect.tsx

import { Card, Group, SimpleGrid, Text, Title } from "@mantine/core";
import { Building2 } from "lucide-react";
import RoleCard from "./RoleCard";
import { CUSTOMER_ROLES } from "./companyRoles";

interface OnboardingRoleSelectProps {
  /** Currently selected profile types (e.g. ["importer"], ["importer","exporter","freight_forwarder"]). */
  value: string[];
  onChange: (next: string[]) => void;
}

/**
 * First (and only) thing shown in the Company Profile tab during onboarding.
 * Importer / Exporter / Freight Forwarder are independent services that can be
 * picked in any combination — each becomes its own profile (with its own
 * business license) under the same company. A valid selection reveals the
 * company-profile fields.
 */
export default function OnboardingRoleSelect({
  value,
  onChange,
}: OnboardingRoleSelectProps) {
  const selected = new Set(value);

  const toggleRole = (type: string) => {
    const next = new Set(value);
    if (next.has(type)) next.delete(type);
    else next.add(type);
    onChange([...next]);
  };

  return (
    <Card padding="lg">
      <Group gap="sm" mb="xs">
        <Building2 size={20} />
        <Title order={3}>What does your company do?</Title>
      </Group>
      <Text c="edr-muted" size="sm" mb="lg">
        Pick any combination of Importer, Exporter and Freight Forwarder — each
        is set up with its own business license.
      </Text>

      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
        {CUSTOMER_ROLES.map((role) => (
          <RoleCard
            key={role.type}
            label={role.label}
            description={role.description}
            icon={role.icon}
            selected={selected.has(role.type)}
            onClick={() => toggleRole(role.type)}
          />
        ))}
      </SimpleGrid>
    </Card>
  );
}