Input

import { forwardRef, type InputHTMLAttributes } from "react"
import { cn } from "@/lib/utils"
import SiteIcon, type SiteIconProps } from "@/components/site-icon"

type Size = "sm" | "md" | "lg"
type Tone = "default" | "subtle"

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  size?: Size
  tone?: Tone
  leadingIcon?: SiteIconProps["icon"]
  trailingIcon?: SiteIconProps["icon"]
  invalid?: boolean
}

const sizeClass: Record<Size, string> = {
  sm: "ds-input--sm",
  md: "",
  lg: "ds-input--lg",
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  function Input({ size = "md", tone = "default", leadingIcon, trailingIcon, invalid, className, ...props }, ref) {
    const input = (
      <input
        ref={ref}
        className={cn("ds-input", sizeClass[size], `ds-input--${tone}`, invalid && "ds-input--invalid", className)}
        aria-invalid={invalid || undefined}
        {...props}
      />
    )
    if (!leadingIcon && !trailingIcon) return input
    return (
      <div className="ds-input-affix">
        {leadingIcon ? <SiteIcon icon={leadingIcon} size="sm" tone="muted" /> : null}
        {input}
        {trailingIcon ? <SiteIcon icon={trailingIcon} size="sm" tone="muted" /> : null}
      </div>
    )
  },
)