import styles from './styles.module.scss'
import classNames from 'classnames'

type CollapsibleArrowProps = {
  direction: "UP" | "DOWN",
  onClick?: () => void,
  stroke?: number
}


export const CollapsibleArrow = ({direction, onClick, stroke = 2}: CollapsibleArrowProps) => {

  const style = classNames({
    [styles.arrow]: true,
    [styles.arrowUp]: direction == "UP"
  })
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="12"
      height="10"
      viewBox="0 0 12 10"
      fill="none"
      className={style}
      onClick={onClick}
    >
      <path d="M1 1L5.28326 8.50159C5.6627 9.16614 6.3373 9.16614 6.71674 8.50159L11 1" stroke="var(--base-color)"
            strokeWidth={stroke} />
    </svg>
  )
}