import { FC } from 'react'
import { I18n } from '../I18n/I18n'
import { GraphIcon } from '../../icons/GraphIcon'
import Link from 'next/link'
import { useRouter } from 'next/router'
import styles from './ButtonVisualize.module.css'

interface Props {
  groupId?: string
  large?: true
}

export const ButtonVisualize: FC<Props> = ({ groupId, large }) => {
  const { query } = useRouter()
  return (
    <span className={styles.root}>
      <Link href={{ pathname: !groupId ? '/visualize' : `/visualize/${groupId}`, query }}>
        <a className={styles.link}>
          {large ? <I18n id={'page.home.pref.visualize'} /> : null}
          <GraphIcon />
        </a>
      </Link>
    </span>
  )
}