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

interface TextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
  hint?: string;
  rows?: number;
  resize?: "none" | "vertical" | "horizontal" | "both";
}

export function Textarea(props: TextareaProps) {
  const [local, rest] = splitProps(props, ["label", "error", "hint", "class", "rows", "resize"]);
  const [isFocused, setIsFocused] = createSignal(false);

  const resizeClass = () => {
    switch (local.resize) {
      case "none": return "resize-none";
      case "vertical": return "resize-y";
      case "horizontal": return "resize-x";
      case "both": return "resize";
      default: return "resize-y";
    }
  };

  return (
    <div class="w-full">
      {local.label && (
        <label class="block font-display text-sm font-medium text-ink mb-2">
          {local.label}
        </label>
      )}
      <textarea
        {...rest}
        rows={local.rows || 4}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        class={[
          "w-full bg-canvas 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:ring-3",
          isFocused() ? "border-accent ring-accent/10" : "border-border",
          local.error ? "border-error focus:border-error focus:ring-error/10" : "",
          resizeClass(),
          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>
  );
}
