'use client';

import { cn } from '@/lib/utils';
import type { CreditLevel } from './types';
import { CREDIT_LEVEL_CONFIG } from './types';

interface CreditSignalProps {
  level: CreditLevel;
  taxStatus?: string;
  showDescription?: boolean;
}

export function CreditSignal({
  level,
  taxStatus,
  showDescription = false,
}: CreditSignalProps) {
  const config = CREDIT_LEVEL_CONFIG[level];

  return (
    <div className="flex flex-col items-center gap-4">
      {/* 신호등 */}
      <div className="flex items-center gap-2">
        {[1, 2, 3, 4, 5].map((l) => (
          <div
            key={l}
            className={cn(
              'w-8 h-8 rounded-full border-2 transition-all',
              l <= level
                ? cn(config.bgColor, 'border-transparent')
                : 'bg-gray-200 border-gray-300'
            )}
          />
        ))}
      </div>

      {/* 등급 표시 */}
      <div className="text-center">
        <div className={cn('text-2xl font-bold', config.color)}>
          {config.status} (Level {level})
        </div>
        {taxStatus && (
          <div className="text-sm text-gray-500 mt-1">
            {taxStatus}
          </div>
        )}
      </div>

      {/* 설명 */}
      {showDescription && (
        <p className="text-sm text-gray-600 text-center max-w-xs">
          {config.description}
        </p>
      )}
    </div>
  );
}
