import React from 'react'

import Icon from '../icon'
import { AccordionItemArrowProps } from './accordion.types'

const names = {
  horizontal: {
    collapsed: 'falChevronRight',
    expanded: 'falChevronLeft',
  },
  vertical: {
    collapsed: 'falChevronDown',
    expanded: 'falChevronUp',
  },
}

const AccordionItemArrow = ({
  collapsed,
  color = 'sandstone.10',
  disabled = false,
  orientation = 'vertical',
  ...rest
}: AccordionItemArrowProps) => (
  <Icon
    name={names[orientation][collapsed ? 'collapsed' : 'expanded']}
    opacity={disabled ? 0.5 : 1}
    pathFill={color}
    size="sm"
    {...rest}
  />
)

export default React.memo(AccordionItemArrow)
