import { sidePanelVariants } from "./variants"

import styles from "./sidePanel.module.css"

import type { VariantProps } from "class-variance-authority"

type SidePanelProps = { children: React.ReactNode } & VariantProps<
  typeof sidePanelVariants
>

export function SidePanel({ children, variant }: SidePanelProps) {
  const classNames = sidePanelVariants({ variant })
  return (
    <div className={classNames}>
      <div className={styles.hider} />
      <div className={styles.wrapper}>{children}</div>
      <div className={styles.shadow} />
    </div>
  )
}