"use client";

import type { InputHTMLAttributes, ReactNode } from "react";
import { twMerge } from "tailwind-merge";

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  icon?: ReactNode;
  suffix?: ReactNode;
  inline?: boolean;
  description?: string;
}

export function Input({ label, icon, suffix, inline, className, description, ...props }: InputProps) {
  const shell = inline ? "ks-input-shell md:flex-row md:items-center md:gap-3" : "ks-input-shell";

  return (
    <div className={shell}>
      <div className="flex flex-col">
        {label ? (
          <label className="ks-input-label" htmlFor={props.id}>
            {label}
          </label>
        ) : null}
        {description ? (
          <p className="text-xs text-[var(--ks-color-text-soft)] mt-1">
            {description}
          </p>
        ) : null}
      </div>
      <div className="ks-input-wrapper">
        {icon ? <span className="text-[var(--ks-color-text-soft)]">{icon}</span> : null}
        <input className={twMerge("ks-input", className)} {...props} />
        {suffix ? <span className="text-[var(--ks-color-text-soft)]">{suffix}</span> : null}
      </div>
    </div>
  );
}