import type { Sidenote } from '@/lib/types/components';
import styles from './Container.module.css';

interface ContainerProps {
  items: Sidenote[];
}

export default function Container({ items }: ContainerProps) {
  return (
    <aside className={styles.container}>
      {items.map((sidenote: Sidenote) => (
        <div
          key={sidenote.id}
          id={sidenote.id}
          className={styles.wrapper}
          style={
            { positionAnchor: `--note-${sidenote.id}` } as React.CSSProperties
          }
        >
          <div className={`${styles.note} ${styles[sidenote.type]}`}>
            <span className={styles.marker}>
              <span className={styles.symbol}>{sidenote.marker}</span>
            </span>
            <div className={styles.content}>
              {sidenote.content}
              <a href={`#ref-${sidenote.id}`} className={styles.ref}>
                ↩
              </a>
            </div>
          </div>
        </div>
      ))}
    </aside>
  );
}
