"use client";

/**
 * TabChip - 모바일용 탭 칩 컴포넌트
 *
 * 디자인시스템 Atoms로 등록된 재사용 가능한 탭 칩입니다.
 * - 활성/비활성 상태 스타일
 * - 카운트 표시
 * - 색상 변형 지원
 */

export interface TabChipProps {
  /** 탭 라벨 */
  label: string;
  /** 카운트 숫자 */
  count?: number;
  /** 활성 상태 (active 또는 isActive 둘 다 지원) */
  active?: boolean;
  /** 활성 상태 (active의 별칭) */
  isActive?: boolean;
  /** 클릭 이벤트 */
  onClick?: () => void;
  /** 색상 테마 */
  color?: "blue" | "gray" | "green" | "orange" | "purple" | "red";
  /** 추가 className */
  className?: string;
}

export function TabChip({
  label,
  count,
  active = false,
  isActive,
  onClick,
  color: _color = "blue",
  className = "",
}: TabChipProps) {
  // isActive가 전달되면 isActive 사용, 아니면 active 사용
  const isActiveState = isActive ?? active;

  return (
    <button
      onClick={onClick}
      className={`
        inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg border text-sm whitespace-nowrap transition-all
        ${
          isActiveState
            ? "border-primary bg-primary text-white shadow-sm font-medium"
            : "border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 text-gray-600"
        }
        ${className}
      `}
    >
      {label}
      {count !== undefined && (
        <span
          className={`font-semibold ${
            isActiveState ? "text-white" : "text-gray-900"
          }`}
        >
          {count}
        </span>
      )}
    </button>
  );
}