'use client';

/**
 * StatusBadge Component
 *
 * Displays issue status with appropriate icon and color.
 *
 * @module features/issues/components/StatusBadge
 */

import {
  CircleDot,
  PlayCircle,
  Clock,
  AlertCircle,
  CheckCircle2,
  XCircle,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import type { IssueStatus } from '../types';
import { STATUS_CONFIG } from '../constants';

const STATUS_ICONS = {
  open: CircleDot,
  in_progress: PlayCircle,
  in_review: Clock,
  blocked: AlertCircle,
  done: CheckCircle2,
  closed: XCircle,
} as const;

interface StatusBadgeProps {
  status: IssueStatus;
  className?: string;
  showLabel?: boolean;
}

export function StatusBadge({ status, className, showLabel = true }: StatusBadgeProps) {
  const config = STATUS_CONFIG[status] || STATUS_CONFIG.open;
  const Icon = STATUS_ICONS[status] || CircleDot;

  return (
    <div className={cn('flex items-center gap-1.5', config.color, className)}>
      <Icon className="h-4 w-4" aria-hidden="true" />
      {showLabel && (
        <span className="text-sm font-medium">{config.label}</span>
      )}
      <span className="sr-only">{config.label}</span>
    </div>
  );
}
