'use client';

import React from 'react';
import styled from 'styled-components';
import { theme } from '@/styles/theme';

type TaskStatus = 'pending' | 'in_progress' | 'review' | 'done' | 'failed' | 'blocked' | 'escalated';

interface TaskBadgeProps {
  status: TaskStatus;
}

const statusConfig: Record<TaskStatus, { label: string; color: string; bg: string }> = {
  pending: { label: '대기', color: 'var(--text-secondary)', bg: 'rgba(139,148,158,0.1)' },
  in_progress: { label: '진행중', color: '#2979FF', bg: 'rgba(41,121,255,0.12)' },
  review: { label: '리뷰', color: '#FF9800', bg: 'rgba(255,152,0,0.12)' },
  done: { label: '완료', color: '#00FF00', bg: 'rgba(0,230,118,0.12)' },
  failed: { label: '실패', color: '#FF1744', bg: 'rgba(255,23,68,0.12)' },
  blocked: { label: '블로킹', color: '#FF5722', bg: 'rgba(255,87,34,0.12)' },
  escalated: { label: '에스컬레이션', color: '#E040FB', bg: 'rgba(224,64,251,0.12)' },
};

const Badge = styled.span<{ $color: string; $bg: string }>`
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: ${({ $color }) => $color};
  background: ${({ $bg }) => $bg};
  white-space: nowrap;
`;

export default function TaskBadge({ status }: TaskBadgeProps) {
  const cfg = statusConfig[status] ?? statusConfig.pending;
  return <Badge $color={cfg.color} $bg={cfg.bg}>{cfg.label}</Badge>;
}