import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Stack } from './Stack';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

interface RaceSidebarPanelProps {
  title: string;
  icon?: LucideIcon;
  children: React.ReactNode;
}

export function RaceSidebarPanel({
  title,
  icon,
  children
}: RaceSidebarPanelProps) {
  return (
    <Box 
      bg="bg-panel-gray" 
      rounded="xl" 
      border 
      borderColor="border-charcoal-outline" 
      overflow="hidden"
    >
      <Box p={4} borderBottom="1px solid" borderColor="border-charcoal-outline" bg="bg-graphite-black/30">
        <Stack direction="row" align="center" gap={2}>
          {icon && <Icon icon={icon} size={4} color="#198CFF" />}
          <Text weight="bold" size="sm" color="text-white" uppercase>
            {title}
          </Text>
        </Stack>
      </Box>
      <Box p={4}>
        {children}
      </Box>
    </Box>
  );
}