"use client";
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";

export default function Header() {
  // State để kiểm tra trạng thái của menu
  const [menuActive, setMenuActive] = useState(false);

  const handleMenuClick = () => {
    setMenuActive(!menuActive); // Toggle trạng thái của menu
  };

  return (
    <header>
      <div className="header">
        <div className="container">
          <div className="content-header-main flex items-center justify-between">
            <Link href="/" className="logo">
              <Image
                src="/images/logo.png"
                width={100}
                height={100}
                alt="logo"
              />
            </Link>
            <div className="menu-right flex items-center">
              <div
                className={`item ${menuActive ? "active" : ""}`}
                onClick={handleMenuClick}
                id="menu_product"
              >
                <div className="title">Sản phẩm</div>
                <div className={`hover-menu ${menuActive ? "active" : ""}`}>
                  <div className="item-menu">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/icon-hura8.png"
                          width={100}
                          height={16}
                          alt="hura 8"
                        />
                      </div>
                      <p className="txt line-clamp-4">
                        Tốt nhất cho hoạt động thương mại điện tử của doanh
                        nghiệp
                      </p>
                    </div>
                    <a href="" className="more">
                      <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  <div className="item-menu">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/icon-xstore.png"
                          width={100}
                          height={16}
                          alt="xstore"
                        />
                      </div>
                      <p className="txt line-clamp-4">
                        Bộ sản phẩm về quản lý đơn hàng, hàng tồn kho và khách
                        hàng dành cho các doanh nghiệp vừa và nhỏ. Được bổ sung
                        với một POS thông minh.
                      </p>
                    </div>
                    <a href="" className="more">
                      <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  <div className="item-menu">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/icon-adman.png"
                          width={100}
                          height={16}
                          alt="icon-adman"
                        />
                      </div>
                      <p className="txt line-clamp-4">
                        Nền tảng tiếp thị toàn diện dành cho các chuyên gia.
                      </p>
                    </div>
                    <a href="" className="more">
                      <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  <div className="item-menu chatngay">
                    <div className="top">
                      <div className="icon">
                        <Image
                          src="/images/icon-chatngay.png"
                          width={100}
                          height={16}
                          alt="icon-chatngay"
                        />
                      </div>
                      <p className="txt line-clamp-4">
                        Giúp khách hàng đang truy cập website trò chuyện với bạn
                        một cách đơn giản, nhanh chóng và thuận tiện.
                      </p>
                    </div>
                    <a href="" className="more">
                      <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                </div>
              </div>
              <Link href="/page/page_job" className="item">
                Tuyển dụng
              </Link>
              <Link href="/article" className="item">
                Blog
              </Link>
              <Link href="/contact" className="item">
                Liên hệ
              </Link>
              <Link href="#" className="item">
                <i className="icon_2024 global"></i>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}
