import { FC, PropsWithChildren } from 'react'
import styles from './Collapsible.module.css'
import cx from 'classnames'
import typography from '../../../styles/typography.module.css'

interface Props {
  id: string
  className?: string
}

export const Collapsible: FC<PropsWithChildren<Props>> = ({ id, className, children }) => {
  return (
    <div className={cx(styles.collapsible, className)}>
      <input id={id} className={styles.toggle} type='checkbox' defaultChecked={true} />
      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
      <label
        htmlFor={id}
        id={id}
        className={cx(styles.label, typography.displaySmall)}
        defaultChecked={true}
      />
      <div className={styles.content}>{children}</div>
    </div>
  )
}