import { Card, Group, SimpleGrid, Text, Title } from "@mantine/core";
import { Globe2, MapPin } from "lucide-react";

import type { CompanyNationality } from "@/services/companies.service";
import RoleCard from "./RoleCard";

interface NationalitySelectProps {
  value: CompanyNationality | null;
  onChange: (next: CompanyNationality) => void;
  /** Render only the option grid — the wizard supplies its own header/card. */
  embedded?: boolean;
}

/**
 * First step of onboarding: is this an Ethiopian or a Foreign company? The
 * choice determines which documents are requested later (TIN / Commercial
 * License / National ID for Ethiopian, Passport / Investment License for
 * Foreign).
 */
export default function NationalitySelect({
  value,
  onChange,
  embedded = false,
}: NationalitySelectProps) {
  const grid = (
    <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
      <RoleCard
        label="Ethiopian Company"
        description="Registered in Ethiopia. You'll provide a TIN certificate, commercial license and national ID."
        icon={<MapPin size={22} />}
        selected={value === "ethiopian"}
        onClick={() => onChange("ethiopian")}
      />
      <RoleCard
        label="Foreign Company"
        description="Registered abroad. You'll provide a passport and investment license."
        icon={<Globe2 size={22} />}
        selected={value === "foreign"}
        onClick={() => onChange("foreign")}
      />
    </SimpleGrid>
  );

  if (embedded) return grid;

  return (
    <Card padding="lg">
      <Group gap="sm" mb="xs">
        <Globe2 size={20} />
        <Title order={3}>Where is your company registered?</Title>
      </Group>
      <Text c="edr-muted" size="sm" mb="lg">
        This determines the documents we'll ask you to provide.
      </Text>
      {grid}
    </Card>
  );
}
