/**
 * Tailwind CSS 기반 Input 컴포넌트 공통 스타일
 */

export const INPUT_CLASSES = {
  // 기본 input 스타일
  base: `
    w-full h-10 px-3 py-2 text-sm
    border border-gray-300 rounded-md
    bg-white text-gray-900
    outline-none transition-all duration-200
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
    placeholder:text-gray-400
  `,

  // 선택된 상태
  selected: `
    border-blue-500 ring-2 ring-blue-100
  `,

  // 라벨 스타일
  label: `
    absolute -top-6 left-0 text-sm font-medium text-slate-600
  `,

  // 필수 표시
  required: `
    text-red-500
  `,

  // 컨테이너
  container: `
    relative w-full
  `,

  // textarea
  textarea: `
    w-full min-h-[80px] px-3 py-2 text-sm
    border border-gray-300 rounded-md
    bg-white text-gray-900
    outline-none transition-all duration-200
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
    resize-vertical
  `,

  // select
  select: `
    w-full h-10 px-3 py-2 text-sm
    border border-gray-300 rounded-md
    bg-white text-gray-900
    outline-none transition-all duration-200
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
    cursor-pointer
  `,

  // flex 컨테이너 (email, tel, url 등)
  flexContainer: `
    flex items-center gap-2 w-full h-10
  `,

  // 구분자 (@ , ~ 등)
  separator: `
    text-base font-medium text-gray-500
  `,

  // Currency 통화 기호
  currencySymbol: `
    text-base font-semibold text-green-600 pl-2
  `,

  // Currency input
  currencyInput: `
    flex-1 h-full px-3 py-2 text-base font-semibold text-right
    border border-gray-300 rounded-md
    bg-white text-green-600
    outline-none transition-all duration-200
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400
  `,

  // Percentage 퍼센트 기호
  percentageSymbol: `
    text-base font-semibold text-blue-600 pr-2
  `,

  // Percentage input
  percentageInput: `
    flex-1 h-full px-3 py-2 text-base font-semibold text-right
    border border-gray-300 rounded-md
    bg-white text-blue-600
    outline-none transition-all duration-200
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400
  `,
};

/**
 * 클래스명 결합 유틸리티
 */
export function cn(...classes: (string | boolean | undefined)[]): string {
  return classes.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
}

/**
 * Input 클래스 생성기
 */
export function getInputClasses(isSelected?: boolean, isDisabled?: boolean): string {
  return cn(INPUT_CLASSES.base, isSelected && INPUT_CLASSES.selected, isDisabled && "opacity-60");
}