import type { ComponentProps } from "react";

type InputProps = ComponentProps<"input">;

/** 기본 텍스트 입력. `readOnly`일 때 배경 톤 + 기본 커서로 편집 불가 상태를 시각 구분한다. */
export function Input({ className, readOnly, ...props }: InputProps) {
  return (
    <input
      readOnly={readOnly}
      className={`h-10 w-full rounded-md border border-border px-3 text-body-md text-foreground placeholder:text-foreground-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:opacity-50 ${
        readOnly ? "cursor-default bg-surface-muted" : "bg-surface"
      } ${className ?? ""}`}
      {...props}
    />
  );
}