import clsx from "clsx";
import { forwardRef } from "react";

const IconInput = forwardRef(function IconInput(
  { icon: LucideIcon, trailing, error, ...inputProps },
  ref
) {
  return (
    <div
      className={clsx(
        "flex items-center gap-2.5 px-3.5 h-12 bg-surface border rounded-md transition-colors duration-normal ease-out-expo",
        error
          ? "border-error-fg focus-within:border-error-fg"
          : "border-line focus-within:border-accent"
      )}
    >
      {LucideIcon && (
        <span className="text-fg-tertiary inline-flex flex-shrink-0">
          <LucideIcon size={16} strokeWidth={1.75} className="inline-flex shrink-0" />
        </span>
      )}
      <input
        ref={ref}
        {...inputProps}
        className="flex-1 min-w-0 bg-transparent border-none outline-none text-fg font-sans text-sm tracking-[-0.005em]"
      />
      {trailing}
    </div>
  );
});

window.IconInput = IconInput;