import Link from "next/link";
import { cn } from "@/lib/cn";

export function Checkbox({
  label,
  hint,
  checked = false,
  href,
}: {
  label: string;
  hint?: string;
  checked?: boolean;
  href?: string;
}) {
  const content = (
    <>
      <span
        className={cn(
          "mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
          checked ? "border-accent bg-accent" : "border-line bg-surface",
        )}
      >
        <span
          className={cn(
            "size-2.5 rounded-[2px] bg-white transition-opacity",
            checked ? "opacity-100" : "opacity-0",
          )}
        />
      </span>
      <span className="space-y-1">
        <span className="block text-sm font-semibold leading-5 text-primary">
          {label}
        </span>
        {hint ? (
          <span className="block text-sm leading-5 text-primary/64">{hint}</span>
        ) : null}
      </span>
    </>
  );

  if (href) {
    return (
      <Link href={href} className="flex items-start gap-3 text-left">
        {content}
      </Link>
    );
  }

  return (
    <label className="flex cursor-pointer items-start gap-3 text-left">
      {content}
      <input type="checkbox" className="sr-only" defaultChecked={checked} />
    </label>
  );
}