'use client';

import { cn } from '@/lib/utils';
import { STATUS_COLORS } from '@/lib/constants';
import type { ProjectStatus } from '@/types/database';

interface StatusBadgeProps {
  status: ProjectStatus;
  size?: 'sm' | 'md' | 'lg';
  showLabel?: boolean;
  text?: string;
}

export function StatusBadge({ status, size = 'md', showLabel = true, text }: StatusBadgeProps) {
  const colors = STATUS_COLORS[status];
  const sizeClasses = {
    sm: 'h-2 w-2',
    md: 'h-3 w-3',
    lg: 'h-4 w-4',
  };

  return (
    <div className="flex items-center gap-1.5">
      <div className={cn('rounded-full', sizeClasses[size], colors.bg, 'ring-2', colors.border.replace('border', 'ring'))} />
      {showLabel && (
        <span className={cn('text-sm font-medium', colors.text)}>
          {text || colors.label}
        </span>
      )}
    </div>
  );
}

interface StatusDotProps {
  status: ProjectStatus;
  size?: 'sm' | 'md' | 'lg';
  pulse?: boolean;
}

export function StatusDot({ status, size = 'md', pulse = false }: StatusDotProps) {
  const colors = STATUS_COLORS[status];
  const sizeClasses = {
    sm: 'h-2 w-2',
    md: 'h-3 w-3',
    lg: 'h-4 w-4',
  };

  const bgColor = status === 'green' ? 'bg-emerald-500' : status === 'yellow' ? 'bg-amber-500' : 'bg-rose-500';

  return (
    <span className="relative flex">
      {pulse && status !== 'green' && (
        <span className={cn('animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', bgColor)} />
      )}
      <span className={cn('relative inline-flex rounded-full', sizeClasses[size], bgColor)} />
    </span>
  );
}