'use client';

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

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

interface LeagueRulesPanelProps {
  rules: Rule[];
}

export function LeagueRulesPanel({ rules }: LeagueRulesPanelProps) {
  return (
    <Stack as="section">
      <Stack gap={8}>
        <Stack display="flex" alignItems="start" gap={4} p={4} bg="blue-500/5" border borderColor="blue-500/20">
          <Stack color="text-blue-500" mt={0.5}><Info size={20} /></Stack>
          <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>
        </Stack>

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