Radio

"use client";

import { createContext, useContext, useState } from "react";

type RadioContextType = { value: string; onChange: (value: string) => void; name: string };
const RadioContext = createContext<RadioContextType | null>(null);

export function DSRadioGroup({
  value: controlledValue, defaultValue = "", onChange, name, children,
}: {
  value?: string; defaultValue?: string; onChange?: (value: string) => void;
  name: string; children: React.ReactNode;
}) {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const currentValue = isControlled ? controlledValue : internalValue;

  const handleChange = (val: string) => {
    if (!isControlled) setInternalValue(val);
    onChange?.(val);
  };

  return (
    <RadioContext.Provider value={{ value: currentValue, onChange: handleChange, name }}>
      <div role="radiogroup" className="flex flex-col gap-3">{children}</div>
    </RadioContext.Provider>
  );
}

export function DSRadioItem({
  value, label, description, disabled = false,
}: {
  value: string; label: string; description?: string; disabled?: boolean;
}) {
  const ctx = useContext(RadioContext);
  if (!ctx) throw new Error("DSRadioItem must be used within DSRadioGroup");
  const selected = ctx.value === value;
  const select = () => { if (!disabled) ctx.onChange(value); };

  return (
    <div className="flex items-start gap-3">
      <button role="radio" aria-checked={selected} onClick={select} disabled={disabled}
        className={`relative inline-flex items-center justify-center w-5 h-5 shrink-0 rounded-full border-2 transition-all duration-150 active:scale-[0.95] mt-0.5 ${selected ? "border-accent" : "border-overlay/15 hover:border-overlay/25"} ${disabled ? "opacity-50 cursor-not-allowed active:scale-100" : ""}`}
        style={{ transitionTimingFunction: "var(--ease-out)" }}>
        <span className="w-2.5 h-2.5 rounded-full bg-accent" style={{
          opacity: selected ? 1 : 0,
          transform: selected ? "scale(1)" : "scale(0)",
          transition: "opacity 150ms var(--ease-out), transform 200ms var(--ease-out)",
        }} />
      </button>
      {(label || description) && (
        <div className={disabled ? "opacity-50" : "cursor-pointer"} onClick={disabled ? undefined : select}>
          {label && <p className="text-sm font-medium text-foreground">{label}</p>}
          {description && <p className="text-xs text-tertiary mt-0.5">{description}</p>}
        </div>
      )}
    </div>
  );
}