import React,{ useState} from 'react';
import { Container,Row,Col,Card, CardHeader, CardBody,CardTitle, CardText} from 'reactstrap';
import {FaQuestionCircle} from 'react-icons/fa'
import Breadcrumbs from './Breadcrumbs';
import Subheader from './Subheader';

// useState - data outside from component ,now within the component - now cannot add by about.push()  as state is immutable
// so use function setAbout([..task,{new object}])
const About =() =>{
  // const [about,setAbout] = useState([
    
  const [about] = useState([
    {
    id:1,
    detail : "A Career Guidance startup aimed at providing free career insights and premium career guidance with experts for all professional course in India\n.More than 3000 students were gained free Guidance last year (2020) through our service. A most promising and fulfilled services are given our dear customers\n. A complete telecalling guidance with experts is given for all students."
    }
  ]
  )
    return (
      <>
        <Breadcrumbs path="About" />
        <Subheader path="About" />
        <div data-aos="fade-up" data-aos-duration="1000" >
        <Container style={{margin:"30px auto"}} className="text-center">
        <Row>
            <Col>
            <Card body className="text-center">
              <CardHeader><FaQuestionCircle size={42}/></CardHeader>
              <CardBody>
                <CardTitle className="orange" tag="h5">VISON FTF</CardTitle>
                <CardText>{about.map((content)=> 
                    (<span key={content.id}>{content.detail}</span>)
                )}</CardText>

              </CardBody>
            </Card>
            </Col>
        </Row>
        </Container>
        </div>
        </>
    )
  }

export default About;