'use client';

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

type Status = 'online' | 'offline' | 'working' | 'unknown';

interface StatusBadgeProps {
  status: Status;
}

const statusLabels: Record<Status, string> = {
  online: '온라인',
  offline: '오프라인',
  working: '작업중',
  unknown: '알 수 없음',
};

const statusColors: Record<Status, string> = {
  online: '#00FF00',
  offline: '#FF1744',
  working: '#2979FF',
  unknown: 'var(--text-secondary)',
};

const BadgeWrapper = styled.span<{ $status: Status }>`
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: ${({ $status }) => statusColors[$status]};
`;

const Dot = styled.span<{ $status: Status }>`
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: ${({ $status }) => statusColors[$status]};
  flex-shrink: 0;
  ${({ $status }) =>
    $status === 'online' &&
    `
    box-shadow: 0 0 6px #00E676;
    animation: pulse 2s infinite;
  `}

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
`;

export default function StatusBadge({ status }: StatusBadgeProps) {
  return (
    <BadgeWrapper $status={status}>
      <Dot $status={status} />
      {statusLabels[status]}
    </BadgeWrapper>
  );
}