'use client';

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

export interface Tab {
  id: string;
  label: string;
  icon?: string;
}

interface TabNavProps {
  tabs: Tab[];
  active: string;
  onChange: (id: string) => void;
}

const Nav = styled.div`
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
`;

const TabBtn = styled.button<{ $active: boolean }>`
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid ${({ $active }) => $active ? '#58A6FF' : 'transparent'};
  color: ${({ $active }) => $active ? 'var(--text-primary)' : 'var(--text-secondary)'};
  font-size: 14px;
  font-weight: ${({ $active }) => $active ? '600' : '400'};
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;

  &:hover {
    color: var(--text-primary);
  }
`;

export default function TabNav({ tabs, active, onChange }: TabNavProps) {
  return (
    <Nav>
      {tabs.map((tab) => (
        <TabBtn key={tab.id} $active={active === tab.id} onClick={() => onChange(tab.id)}>
          {tab.icon && <span>{tab.icon}</span>}
          {tab.label}
        </TabBtn>
      ))}
    </Nav>
  );
}