"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/** Shared shell for every text control, so focus looks the same everywhere. */
export const controlBase =
  "w-full rounded-control border border-edge bg-[var(--surface-2)] px-3 py-2 " +
  "text-body text-ink outline-none placeholder:text-mute " +
  "transition-[border-color,box-shadow,background] duration-150 ease-out " +
  "focus:border-accent-line focus:bg-[var(--surface)] " +
  "focus:shadow-[0_0_0_3px_var(--accent-soft)] " +
  "disabled:opacity-45 disabled:cursor-not-allowed";

export const Input = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement>
>(({ className, ...props }, ref) => (
  <input ref={ref} className={cn(controlBase, className)} {...props} />
));
Input.displayName = "Input";

export const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.TextareaHTMLAttributes<HTMLTextAreaElement>
>(({ className, ...props }, ref) => (
  <textarea ref={ref} className={cn(controlBase, "resize-y leading-relaxed", className)} {...props} />
));
Textarea.displayName = "Textarea";

/**
 * Options inherit the surface token rather than a hardcoded `#12141c`, which
 * previously rendered dark dropdown items on a white page in light mode.
 */
export const Select = React.forwardRef<
  HTMLSelectElement,
  React.SelectHTMLAttributes<HTMLSelectElement>
>(({ className, children, ...props }, ref) => (
  <select ref={ref} className={cn(controlBase, "cursor-pointer pr-8", className)} {...props}>
    {children}
  </select>
));
Select.displayName = "Select";

export function Field({
  label,
  hint,
  htmlFor,
  children,
  className,
}: {
  label: string;
  hint?: React.ReactNode;
  htmlFor?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex flex-col gap-1.5", className)}>
      <label htmlFor={htmlFor} className="text-callout font-medium text-dim">
        {label}
      </label>
      {children}
      {hint && <p className="text-caption text-mute">{hint}</p>}
    </div>
  );
}