'use client';

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

interface Subagent {
  name: string;
  file: string;
}

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
`;

const Card = styled.div`
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
`;

const Icon = styled.span`
  font-size: 20px;
`;

const Info = styled.div``;

const Name = styled.div`
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
`;

const File = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
  font-family: monospace;
`;

const Empty = styled.div`
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
`;

const agentIcons: Record<string, string> = {
  coder: '👨‍💻',
  'test-writer': '🧪',
  'db-designer': '🗄️',
  'code-reviewer': '🔍',
  'security-auditor': '🔒',
  'nginx-manager': '🌐',
};

export default function SubagentList({ agents }: { agents: Subagent[] }) {
  if (!agents.length) return <Empty>서브에이전트 없음</Empty>;

  return (
    <Grid>
      {agents.map((a) => (
        <Card key={a.name}>
          <Icon>{agentIcons[a.name] ?? '🤖'}</Icon>
          <Info>
            <Name>{a.name}</Name>
            <File>{a.file}</File>
          </Info>
        </Card>
      ))}
    </Grid>
  );
}