import { JSX, splitProps } from "solid-js";

interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  hint?: string;
}

export function Input(props: InputProps) {
  const [local, rest] = splitProps(props, ["label", "error", "hint", "class"]);

  return (
    <div class="w-full">
      {local.label && (
        <label class="block font-display text-sm font-medium text-ink mb-2">
          {local.label}
        </label>
      )}
      <input
        {...rest}
        class={[
          "w-full bg-canvas border border-border rounded-button px-4 py-3",
          "font-sans text-ink placeholder:text-ink-subtle",
          "transition-all duration-200",
          "hover:border-border-strong",
          "focus:outline-none focus:border-accent focus:ring-3 focus:ring-accent/10",
          "disabled:opacity-50 disabled:cursor-not-allowed",
          local.error ? "border-error focus:border-error focus:ring-error/10" : "",
          local.class || "",
        ].join(" ")}
      />
      {local.error && (
        <p class="mt-1.5 text-sm text-error">{local.error}</p>
      )}
      {local.hint && !local.error && (
        <p class="mt-1.5 text-sm text-ink-muted">{local.hint}</p>
      )}
    </div>
  );
}
