import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Icon } from './Icon';

export interface SidebarItemProps {
  children: ReactNode;
  onClick?: () => void;
  icon?: ReactNode;
}

export const SidebarItem = ({ children, onClick, icon }: SidebarItemProps) => {
  return (
    <Box 
      onClick={onClick} 
      display="flex" 
      alignItems="center" 
      gap={3} 
      padding={2} 
      rounded="lg" 
      style={{ cursor: onClick ? 'pointer' : 'default', transition: 'background-color 0.2s' }}
      className="hover:bg-[var(--ui-color-bg-surface-muted)]"
    >
      {icon && (
        <Box flexShrink={0} width={10} height={10} bg="var(--ui-color-bg-surface-muted)" rounded="lg" display="flex" alignItems="center" justifyContent="center">
          {icon}
        </Box>
      )}
      <Box flex={1} minWidth="0">
        {children}
      </Box>
      <Icon icon={ChevronRight} size={4} intent="low" />
    </Box>
  );
};