import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { LucideIcon } from 'lucide-react';
import React from 'react';

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

export function RaceSidebarPanel({
  title,
  icon,
  children
}: RaceSidebarPanelProps) {
  return (
    <Stack 
      bg="bg-panel-gray" 
      rounded="xl" 
      border 
      borderColor="border-charcoal-outline" 
      overflow="hidden"
    >
      <Stack 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>
      </Stack>
      <Stack p={4}>
        {children}
      </Stack>
    </Stack>
  );
}