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

import { ReactNode } from "react";

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

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