import { Avatar, Box } from '@mantine/core';
import cx from 'clsx';
import { useState } from 'react';
import classes from './TableOfContentsFloating.module.css';

type TLink = {
    label: string
    link: string
    order: number
    avartar: string
    key: string
}
export function TableOfContentsFloating({links, defaultActive, setCurrentProject, }
  :{links:TLink[],defaultActive:number, setCurrentProject:(name:string)=>void}) {
  const [active, setActive] = useState(defaultActive);

  const items = links.map((item, index) => (
    <Box<'a'>
      component="a"
      href={item.link}
      onClick={(event) => {
        event.preventDefault();
        setCurrentProject(item.label)
        setActive(index);
      }}
      key={item.label}
      className={cx(classes.link, { [classes.linkActive]: active === index })}
      style={{ paddingLeft: `calc(${item.order} * var(--mantine-spacing-md))`}}
    >
      <Avatar src={item.avartar} size={'xs'} mr={5}/>{item.label}
    </Box>
  ));

  return (
    <div className={classes.root}>
      <div className={classes.links}>
        <div
          className={classes.indicator}
          style={{
            transform: `translateY(calc(${active} * var(--link-height) + var(--indicator-offset)))`
          }}
        />
        {items}
      </div>
    </div>
  );
}