import * as React from "react"

import { cn } from "@/lib/utils"

/*
 * 문의 폼 필드.
 *
 * 회색 채움 박스는 어느 템플릿에나 있다. 밑줄 필드로 바꾸면 같은 기능인데 훨씬
 * 정돈돼 보인다 — 폼이 "입력 상자 더미"가 아니라 한 장의 문서처럼 읽힌다.
 *
 * 밑줄 폼의 알려진 위험은 입력란으로 안 보이는 것(어포던스 손실)인데,
 * 라벨을 항상 위에 두고 밑줄을 2px 로 두껍게 잡아 보완했다.
 * 두께를 항상 2px 로 고정해서 포커스 때 레이아웃이 흔들리지 않는다.
 *
 * 글자 16px 은 취향이 아니라 필수다 — iOS 사파리는 16px 미만 입력에 포커스하면
 * 화면을 자동 확대해서, 광고로 들어온 모바일 사용자의 폼 이탈을 만든다.
 */
const fieldClass =
  "w-full bg-transparent border-0 border-b-2 border-line-strong rounded-none px-0 py-3 " +
  "text-[16px] font-normal text-ink placeholder:text-ink-faint placeholder:font-normal " +
  "outline-none transition-colors hover:border-ink-muted focus:border-primary " +
  "disabled:opacity-50 disabled:cursor-not-allowed"

/* ComponentPropsWithRef 로 두면 ref 가 그대로 전달된다 (React 19 는 forwardRef 불필요).
   데모 요청 모달이 열릴 때 첫 필드로 포커스를 옮기려면 ref 가 필요하다. */
function Input({ className, ...props }: React.ComponentPropsWithRef<"input">) {
  return <input className={cn(fieldClass, className)} {...props} />
}

function Textarea({ className, ...props }: React.ComponentPropsWithRef<"textarea">) {
  return <textarea className={cn(fieldClass, "resize-none leading-[1.6]", className)} {...props} />
}

export { Input, Textarea }