import { FC } from 'react'
import { GroupBox } from './GroupBox/GroupBox'
import styles from './Home.module.css'
import { useGroups } from '../contexts/GroupProvider'
import { SectionPreferences } from './SectionPreferences/SectionPreferences'
import { I18n } from '../shared/I18n/I18n'
import { Heading } from '../shared/Heading'
import { Paragraph } from '../shared/Paragraph/Paragraph'
import { Section } from '../shared/Section/Section'
import { SectionAddMissing } from './SectionAddMissing/SectionAddMissing'
import { SectionShare } from './SectionShare/SectionShare'
import { ButtonVisualize } from '../shared/ButtonVisualize/ButtonVisualize'

export const Home: FC = () => {
  const { groups } = useGroups()

  return (
    <main>
      <Section>
        <Heading type={'pageTitle'}>
          <I18n id={'page.home.title'} />
        </Heading>
        <Paragraph size={'large'}>
          <I18n id={'page.home.description'} />
        </Paragraph>
      </Section>
      <SectionShare />
      <SectionPreferences />
      <SectionAddMissing />
      <Section>
        <Heading type={'section'}>
          <I18n id={'page.home.group.title'} />
          <ButtonVisualize large={true} />
        </Heading>
      </Section>
      <div className={styles.grid}>
        {Object.values(groups)
          .sort((a, b) => a.name.localeCompare(b.name))
          .map(group => (
            <GroupBox key={group.name} group={group} />
          ))}
      </div>
    </main>
  )
}