import type { InputHTMLAttributes, ReactNode } from "react";
import { cn } from "../../lib/cn";

export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
  label?: ReactNode;
};

export function Radio({ className, label, ...props }: RadioProps) {
  return (
    <label className="inline-flex items-center gap-3">
      <span className="relative inline-flex h-5 w-5 shrink-0 items-center justify-center">
        <input
          className={cn(
            "peer absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none rounded-full border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] transition checked:border-[var(--uhuru-border-strong)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--uhuru-border-accent)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60",
            className,
          )}
          type="radio"
          {...props}
        />
        <span className="pointer-events-none relative z-[1] h-2.5 w-2.5 scale-75 rounded-full bg-[var(--uhuru-action-primary)] opacity-0 transition peer-checked:scale-100 peer-checked:opacity-100" />
      </span>
      {label ? <span className="text-sm text-[var(--uhuru-text-primary)]">{label}</span> : null}
    </label>
  );
}