import LinkButton from '@/components/LinkButton'
import type { FC } from 'react'
import { useMatch } from 'react-router-dom'

const OverviewButton: FC<{
  hideLabel?: boolean
  exerciseId?: string
}> = ({ hideLabel, exerciseId }) => {
  const active = useMatch(`/instructor/${exerciseId}`)

  return (
    <LinkButton
      link={
        exerciseId
          ? ['/instructor/:exerciseId', { params: { exerciseId } }]
          : undefined
      }
      button={{
        active: !!active,
        icon: 'feed',
        alignText: 'left',
        fill: true,
        minimal: true,
        title: 'Overview all teams',
        disabled: !exerciseId,
        text: !hideLabel && 'Overview',
      }}
    />
  )
}

export default OverviewButton
