import React from 'react';
import { Grid } from '@/atoms/grid';
import { Separator } from '@/atoms/separator';

interface CurriculumSidebarItemWrapperProps {
  children: React.ReactNode;
  isSelected: boolean;
  onClick?: () => void;
  index: number;
}

function CurriculumSidebarItemWrapper({
  children,
  isSelected,
  onClick,
  index,
}: CurriculumSidebarItemWrapperProps): React.ReactNode {
  return (
    <Grid
      align="center"
      columns="auto 1fr"
      data-curriculum-item-index={index}
      gap="2"
      onClick={onClick}
      position="relative"
      px="3"
      py="2"
      style={{
        backgroundColor: isSelected ? 'var(--yellow-a2)' : undefined,
        cursor: onClick ? 'pointer' : undefined,
      }}
    >
      {isSelected ? (
        <Separator
          color="yellow"
          orientation="vertical"
          size="4"
          style={{ width: '3px', position: 'absolute', left: 0 }}
        />
      ) : null}
      {children}
    </Grid>
  );
}

export default CurriculumSidebarItemWrapper;
