FinalProject/src/pages/FAQPage.jsx

import Breadcrumbs from "../components/Breadcrumbs";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {Accordion, AccordionDetails, AccordionSummary, Container, Typography, useMediaQuery} from "@mui/material";
import {useState} from "react";

const AccordionsItem = ({id, title, content}) => {
    const matches = useMediaQuery('(max-width:768px)');
    const [expanded, setExpanded] = useState(false)

    const handleChange = (panel) => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false)
    }

    return (
        <Accordion
            expanded={expanded === id}
            onChange={handleChange(id)}
            sx={{padding: matches ? '10px' : "20px"}}
        >
            <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1a-content"
                id="panel1a-header"
            >
                <Typography
                    variant={matches ? 'body1' : 'h5'}
                    letterSpacing='3px'
                >
                    {title.toUpperCase()}
                </Typography>
            </AccordionSummary>
            <AccordionDetails>
                <Typography
                    variant='body1'
                    color='#616161'
                    lineHeight='1.7em'
                    fontWeight='300'
                >
                    {content}
                </Typography>
            </AccordionDetails>
        </Accordion>
    )
}

const FAQPage = () => {
    const matches = useMediaQuery('(max-width:768px)');
    return (
        <>
            <Breadcrumbs links={['faq']}/>
            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                <Container maxWidth="lg">
                   <AccordionsItem
                       id={'panel1'}
                       title={'PAYMENT METHODS'}
                       content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
                   />
                    <AccordionsItem
                        id={'panel2'}
                        title={'INTERNATIONAL SHIPPING'}
                        content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
                    />
                    <AccordionsItem
                        id={'panel3'}
                        title={'CASHBACK PROGRAM'}
                        content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
                    />
                    <AccordionsItem
                        id={'panel4'}
                        title={'MONEY BACK WARRANTY'}
                        content={'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem, blanditiis cupiditate dolore eum facilis fuga magni, molestias mollitia odio placeat, possimus sit ut vel. Architecto cumque dignissimos distinctio dolorum eos exercitationem fuga molestiae odio optio placeat porro, possimus, repellendus. Accusamus ad ducimus labore quos rerum sed suscipit voluptatibus.'}
                    />
                </Container>
            </main>
        </>
    )
}
export default FAQPage