"use client";

import { Badge } from "@/components/ui/badge";
import { BadgeSm } from "@/components/atoms/BadgeSm";
import { LucideIcon } from "lucide-react";

/**
 * 상태 뱃지 컴포넌트
 *
 * 목록 아이템의 상태를 표시하는 공통 뱃지 컴포넌트입니다.
 * variant와 color를 조합하여 다양한 스타일의 뱃지를 생성할 수 있습니다.
 *
 * @example
 * ```tsx
 * <StatusBadge variant="success" label="완료" />
 * <StatusBadge variant="warning" label="진행중" />
 * <StatusBadge variant="danger" label="취소" />
 * <StatusBadge variant="info" label="대기" />
 * <StatusBadge variant="default" label="초안" />
 * ```
 */

export type StatusType = "default" | "success" | "warning" | "danger" | "info" | "secondary" | "outline";

export interface StatusBadgeProps {
  /** 뱃지 텍스트 */
  label: string;

  /** 뱃지 변형 스타일 */
  variant?: StatusType;

  /** 커스텀 배경색 (Tailwind 클래스) */
  bgColor?: string;

  /** 커스텀 텍스트 색상 (Tailwind 클래스) */
  textColor?: string;

  /** 커스텀 테두리 색상 (Tailwind 클래스) */
  borderColor?: string;

  /** 아이콘 (선택사항) */
  icon?: LucideIcon;

  /** 추가 className */
  className?: string;

  /** 크기 */
  size?: "sm" | "md" | "lg";

  /** 점 표시 여부 (DataTable에서 사용) */
  showDot?: boolean;
}

export function StatusBadge({
  label,
  variant = "default",
  bgColor,
  textColor,
  borderColor,
  icon: Icon,
  className = "",
  size = "md",
  showDot: _showDot
}: StatusBadgeProps) {
  // variant에 따른 기본 스타일
  const variantStyles: Record<string, string> = {
    default: "bg-gray-100 text-gray-700 border-gray-300",
    success: "bg-green-100 text-green-700 border-green-300",
    warning: "bg-orange-100 text-orange-700 border-orange-300",
    danger: "bg-red-100 text-red-700 border-red-300",
    info: "bg-blue-100 text-blue-700 border-blue-300",
    secondary: "bg-purple-100 text-purple-700 border-purple-300",
    outline: "bg-white text-gray-700 border-gray-300"
  };

  // 크기별 스타일
  const sizeStyles: Record<string, string> = {
    sm: "text-xs px-2 py-0.5",
    md: "text-sm px-2.5 py-1",
    lg: "text-base px-3 py-1.5"
  };

  // 커스텀 색상이 있으면 사용, 없으면 variant 스타일 사용
  const colorClasses = bgColor || textColor || borderColor
    ? `${bgColor || ""} ${textColor || ""} ${borderColor || ""}`
    : variantStyles[variant];

  // size가 sm이면 BadgeSm 사용
  if (size === "sm") {
    return (
      <BadgeSm
        variant="default"
        className={`${colorClasses} font-medium ${className}`}
      >
        {Icon && <Icon className="h-3 w-3 mr-1" />}
        {label}
      </BadgeSm>
    );
  }

  return (
    <Badge
      variant="outline"
      className={`${colorClasses} ${sizeStyles[size]} font-medium ${className}`}
    >
      {Icon && <Icon className="h-3 w-3 mr-1" />}
      {label}
    </Badge>
  );
}