'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Surface } from '@/ui/Surface';

export type RulebookSection = 'scoring' | 'conduct' | 'protests' | 'penalties';

interface RulebookTabsProps {
  activeSection: RulebookSection;
  onSectionChange: (section: RulebookSection) => void;
}

export function RulebookTabs({ activeSection, onSectionChange }: RulebookTabsProps) {
  const sections: { id: RulebookSection; label: string }[] = [
    { id: 'scoring', label: 'Scoring' },
    { id: 'conduct', label: 'Conduct' },
    { id: 'protests', label: 'Protests' },
    { id: 'penalties', label: 'Penalties' },
  ];

  return (
    <Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: '#0f1115', border: '1px solid #262626' }}>
      <Box style={{ display: 'flex', gap: '0.25rem' }}>
        {sections.map((section) => (
          <Button
            key={section.id}
            variant={activeSection === section.id ? 'secondary' : 'ghost'}
            onClick={() => onSectionChange(section.id)}
            fullWidth
            size="sm"
          >
            {section.label}
          </Button>
        ))}
      </Box>
    </Surface>
  );
}