'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Shield, Info } from 'lucide-react';

interface Rule {
  id: string;
  title: string;
  content: string;
}

interface LeagueRulesPanelProps {
  rules: Rule[];
}

export function LeagueRulesPanel({ rules }: LeagueRulesPanelProps) {
  return (
    <Box as="section">
      <Stack gap={8}>
        <Box display="flex" alignItems="start" gap={4} p={4} bg="blue-500/5" border borderColor="blue-500/20">
          <Box color="text-blue-500" mt={0.5}><Info size={20} /></Box>
          <Stack gap={1}>
            <Text size="sm" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">Code of Conduct</Text>
            <Text size="sm" color="text-zinc-400" leading="relaxed">
              All drivers are expected to maintain a high standard of sportsmanship. 
              Intentional wrecking or abusive behavior will result in immediate disqualification.
            </Text>
          </Stack>
        </Box>

        <Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
          {rules.map((rule) => (
            <Box as="article" key={rule.id} display="flex" flexDirection="col" gap={3} p={6} border borderColor="zinc-800" bg="zinc-900/30">
              <Box display="flex" alignItems="center" gap={3}>
                <Box p={2} bg="zinc-800" color="text-zinc-400">
                  <Shield size={18} />
                </Box>
                <Heading level={3} fontSize="md" weight="bold" color="text-white">{rule.title}</Heading>
              </Box>
              <Text size="sm" color="text-zinc-400" leading="relaxed">
                {rule.content}
              </Text>
            </Box>
          ))}
        </Box>
      </Stack>
    </Box>
  );
}
