import React from 'react'
import { cn } from '../../../utils'
import { typographyVariants } from '../../Typography'
import { ExpandedFooterContext } from '../context'
import { ArrowDown, ArrowUp } from '../icons'

export function MainFooterExpanders() {
  const { expanded, toggle } = React.useContext(ExpandedFooterContext)

  return (
    <span
      onClick={toggle}
      className={cn(
        typographyVariants({ variant: 'body-s' }),
        'footer-expander-item flex cursor-pointer flex-row items-center',
        expanded ? 'text-brand' : 'text-platform-navigation-foreground',
      )}
    >
      <>
        All
        {expanded ? <ArrowUp /> : <ArrowDown />}
      </>
    </span>
  )
}