import { cn } from "~/lib/utils";
import type { JSX } from "solid-js";

interface InputProps {
  label?: string;
  type?: "text" | "email" | "password" | "number";
  value?: string;
  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void;
  error?: string;
  helperText?: string;
  placeholder?: string;
  class?: string;
  id?: string;
  name?: string;
  required?: boolean;
  disabled?: boolean;
}

export default function Input(props: InputProps) {
  const id = () =>
    props.id ??
    props.name ??
    globalThis.crypto?.randomUUID?.() ??
    Math.random().toString(36).slice(2, 10);

  return (
    <div class={cn("flex flex-col gap-1", props.class)}>
      {props.label && (
        <label
          for={id()}
          class="text-sm font-medium text-[var(--color-text-primary)]"
        >
          {props.label}
          {props.required && (
            <span class="text-[var(--color-error)] ml-1">*</span>
          )}
        </label>
      )}
      <input
        id={id()}
        type={props.type ?? "text"}
        value={props.value ?? ""}
        onInput={props.onInput}
        placeholder={props.placeholder}
        name={props.name}
        disabled={props.disabled}
        class={cn(
          "w-full bg-transparent border rounded-lg px-4 py-2 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] transition-all duration-200",
          props.error
            ? "border-[var(--color-error)] focus:ring-[var(--color-error)]"
            : "border-[var(--color-border)] focus:ring-[var(--color-focus-ring)]",
          "focus:outline-none focus:ring-2",
          props.disabled && "opacity-50 cursor-not-allowed",
        )}
      />
      {props.error && (
        <p class="text-sm text-[var(--color-error)]">{props.error}</p>
      )}
      {props.helperText && !props.error && (
        <p class="text-sm text-[var(--color-text-tertiary)]">
          {props.helperText}
        </p>
      )}
    </div>
  );
}