// about.tsx
// Copyright (C) 2020  Dwayne Harris

// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.

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