import { Box, Group, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
import { Check } from "lucide-react";

export interface RoleCardProps {
  label: string;
  description: string;
  icon: React.ReactNode;
  /** Highlighted because the user just selected it (toggleable). */
  selected?: boolean;
  /** Highlighted and non-interactive because it is already persisted. */
  locked?: boolean;
  /** Small note under the description, e.g. "Active · IM-00001". */
  lockedNote?: string;
  onClick?: () => void;
}

/**
 * The selectable company-role card used by both the onboarding role picker and
 * the add-only roles card in settings. Visual mirror of the onboarding
 * account-type cards.
 */
export default function RoleCard({
  label,
  description,
  icon,
  selected = false,
  locked = false,
  lockedNote,
  onClick,
}: RoleCardProps) {
  const highlighted = selected || locked;

  return (
    <UnstyledButton
      type="button"
      onClick={locked ? undefined : onClick}
      className={`group block rounded-lg border! p-5! text-left transition-all duration-200 ${
        highlighted
          ? "border-[var(--mantine-color-edr-green-5)]! bg-edr-soft!"
          : "border-edr-border! bg-edr-card! hover:-translate-y-0.5 hover:border-[var(--mantine-color-edr-green-5)]! hover:bg-edr-soft"
      } ${locked ? "cursor-default" : ""}`}
    >
      <Group gap="md" wrap="nowrap" align="start">
        <ThemeIcon
          size={56}
          radius="lg"
          variant={highlighted ? "filled" : "light"}
          color="edr-green"
          className="shrink-0"
        >
          {icon}
        </ThemeIcon>
        <Box className="min-w-0 flex-1">
          <Text fw={700} c="edr-text" fz={15}>
            {label}
          </Text>
          <Text size="xs" c="edr-muted" mt={4} lh={1.5}>
            {description}
          </Text>
          {lockedNote && (
            <Text size="xs" c="edr-green" mt={6} fw={600}>
              {lockedNote}
            </Text>
          )}
        </Box>
        {highlighted && (
          <Check
            size={18}
            className="shrink-0 text-[var(--mantine-color-edr-green-6)]"
          />
        )}
      </Group>
    </UnstyledButton>
  );
}
