import Link from "next/link";
import Image from "next/image";
import logo from "../../../public/assets/photos/logo.svg"
import styles from "./header.module.css"
import { useState } from "react";

const header = ({ backwardStatus, setbackwardStatus }) => {
    const [menuOpen, setMenuOpen] = useState(false);

    const toggleMenu = () => {
        setMenuOpen(!menuOpen);
        setbackwardStatus(!menuOpen);
    };

    return (
        <>
            <div className={styles.header}>
                <div className={`toggleMenu ${menuOpen ? 'open' : ''}`}>
                    <span className="openToggle icon menuIcon" onClick={toggleMenu}></span>
                    <div className={`toggleSlider ${menuOpen ? 'open' : ''}`}>
                        <span className="closeToggle icon closeIcon" onClick={toggleMenu}>
                            منو
                        </span>
                        <div className="toggleContent">
                            <Link href="/main">صفحه اصلی</Link>
                            <Link href="/services">خدمات ما</Link>
                            <Link href="/customers">مشتریان ما</Link>
                            <Link href="/about">درباره ما</Link>
                        </div>
                    </div>
                    <div>
                        <div className={styles.logo}>
                            <Image src={logo} alt='logo' width="100px" height="100px" />
                        </div>
                    </div>
                </div>
                <div className="container">
                    <div className={styles.parent}>
                        <div className={styles.content}>
                            <Link href="/main">صفحه اصلی</Link>
                            <Link href="/services">خدمات ما</Link>
                            <Link href="/customers">مشتریان ما</Link>
                            <Link href="/about">درباره ما</Link>
                        </div>
                        <div className={styles.logoContent}>
                            <div className={styles.logo}>
                                <Image src={logo} alt='logo' width="100px" height="100px" />
                            </div>
                            <div className={styles.logoTxt}>
                                <h1>سپهر دیتا</h1>
                                <h1>SEPEHR DATA</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default header;