'use client';

import { useState } from 'react';
import { Button } from '@mui/material';
import ArrowBottomGrayD from '@/components/icons/ArrowBottomGrayD';
import ModalOpenLocation from '@/app/component/openLocation';
import RoutingWhiteC from '@/components/icons/RoutingWhiteC';
import RoutingC from '@/components/icons/RoutingC';

function Item({ data }) {

    const [isOpen, setIsOpen] = useState(false);

    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <>
            <a
                id="location"
                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
            ></a>
            <Button
                variant='texts'
                onClick={() => setIsOpen(!isOpen)}
                className="!px-[2px] !py-[4px] !flex !items-center !justify-between !w-full"
            >
                <p className="text-[#616161] text-[16px] font-medium">{data.title}</p>
                <div
                    className={`
                        transition-all duration-500
                        ${isOpen ?
                            'rotate-180' :
                            'rotate-0'}
                    `}
                >
                    <ArrowBottomGrayD />
                </div>
            </Button>
            <div
                className={`
                    overflow-hidden transition-all duration-500
                    ${isOpen ?
                        'max-h-screen ' :
                        'max-h-0'}
                `}
            >
                <div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
                    <p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
                    <p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
                    <div className='flex w-full items-center justify-between'>
                        <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
                        <ModalOpenLocation
                            open={open}
                            setOpen={setOpen}
                            handleClose={handleClose}
                        >
                            <Button
                                className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
                                onClick={handleOpen}
                                variant="outlined"
                            >
                                <RoutingC />
                                مسیریابی
                            </Button>
                        </ModalOpenLocation>
                    </div>
                </div>
                <div
                    className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]"
                >
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
                        className='
                            w-full rounded-lg mt-4 h-full
                        '
                        referrerPolicy="no-referrer-when-downgrade"
                        allowFullScreen=""
                        loading="lazy"
                    ></iframe>
                    <ModalOpenLocation
                        open={open}
                        setOpen={setOpen}
                        handleClose={handleClose}
                    >
                        <Button
                            className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3
                            !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
                            onClick={handleOpen}
                        >
                            <RoutingWhiteC />
                            مسیریابی
                        </Button>
                    </ModalOpenLocation>
                </div>
            </div>
        </>
    )
}

export default Item