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

/**
 * A card styled as a large checkbox: clicking it toggles `checked`, which the
 * caller uses to prefill + lock a set of fields (and clear them on uncheck).
 */
export function LinkCheckboxCard({
  checked,
  onToggle,
  title,
  description,
}: {
  checked: boolean;
  onToggle: (checked: boolean) => void;
  title: string;
  description: string;
}) {
  return (
    <UnstyledButton
      onClick={() => onToggle(!checked)}
      role="checkbox"
      aria-checked={checked}
      className={`w-full rounded-lg border! p-3! text-left transition-colors! ${checked
          ? "border-[var(--mantine-color-edr-green-6)]! bg-[var(--mantine-color-edr-green-0)]!"
          : "border-[var(--mantine-color-gray-3)]! hover:border-[var(--mantine-color-edr-green-4)]! hover:bg-[var(--mantine-color-edr-green-0)]!"
        }`}
    >
      <Group gap="sm" wrap="nowrap" align="flex-start">
        <div
          className={`mt-px flex h-5 w-5 shrink-0 items-center justify-center rounded-[6px] border transition-colors ${checked
              ? "border-[var(--mantine-color-edr-green-6)] bg-[var(--mantine-color-edr-green-6)] text-white"
              : "border-[var(--mantine-color-gray-4)] bg-white"
            }`}
        >
          {checked && <Check size={14} strokeWidth={3} />}
        </div>
        <div>
          <Text fw={600} size="sm" c="edr-text" lh={1.25}>
            {title}
          </Text>
          <Text size="xs" c="dimmed" mt={2}>
            {description}
          </Text>
        </div>
      </Group>
    </UnstyledButton>
  );
}

export default LinkCheckboxCard;
