sam-react-prod/src/components/atoms/TabChip.tsx

"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 = "blue",
  className = "",
}: TabChipProps) {
  // isActive가 전달되면 isActive 사용, 아니면 active 사용
  const isActiveState = isActive ?? active;

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