import React, { FC, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useTheme } from '../../hooks'
import { setTitle } from '../../utils'

import Section from '../../components/section'
import Title from '../../components/title'
import Subtitle from '../../components/subtitle'

const About: FC = () => {
    const theme = useTheme()

    useEffect(() => {
        setTitle('About Flexor', false)
    })
    
    return (
        <Section>
            <Title>About Flexor</Title>

            <p>Flexor is a service that lets users post stuff for their subscribers to see. Here are some things to know about how it works:</p>

            <Subtitle>Communities</Subtitle>

            <p>Flexor is made up of Communities. Each account is created through one. Communities enforce their own standards of behavior.</p>

            <p>Check out <Link style={{ color: theme.secondary }} to="/communities">the list of Communities</Link>.</p>

            <Subtitle>Apps</Subtitle>

            <p>Users post content to Flexor through apps created by other people/organizations.</p>

            <p>Check out <Link style={{ color: theme.secondary }} to="/apps">the list of Apps</Link>.</p>
        </Section>
    )
}

export default About