import { useState } from 'react';
import { useI18n } from '../hooks/useI18n';
import type { RoadmapItem } from '../types';

interface RoadmapGridProps {
  roadmap: RoadmapItem;
  showCounts?: boolean;
}

export default function RoadmapGrid({ roadmap, showCounts = false }: RoadmapGridProps) {
  const { t } = useI18n();
  const [tab, setTab] = useState<'done' | 'doing' | 'planned'>('done');

  const columns: { key: 'done' | 'doing' | 'planned'; label: string }[] = [
    { key: 'done', label: t('detail.roadmap.done') },
    { key: 'doing', label: t('detail.roadmap.doing') },
    { key: 'planned', label: t('detail.roadmap.planned') },
  ];

  return (
    <div className="roadmap-compact">
      <div className="roadmap-tabs">
        {columns.map((col) => (
          <button
            key={col.key}
            className={`roadmap-tab ${col.key} ${tab === col.key ? 'active' : ''}`}
            onClick={() => setTab(col.key)}
          >
            {col.label}
            {showCounts && ` (${roadmap[col.key].length})`}
          </button>
        ))}
      </div>
      <div className="roadmap-tab-content">
        {roadmap[tab].map((item, i) => (
          <div key={i} className="roadmap-item-inline">
            <span className={`dot ${tab}`} />
            <span>{item}</span>
          </div>
        ))}
        {roadmap[tab].length === 0 && <div className="roadmap-empty">—</div>}
      </div>
    </div>
  );
}
