'use client';
import React, { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { FaMapMarkerAlt, FaBars } from 'react-icons/fa';
import BoxShowroom from '@components/common/BoxShowroom';

const HeaderMid: React.FC = () => {
  const PopupAddress = () => {
    const modal = document.getElementById('boxShowroom') as HTMLDialogElement;
    modal?.showModal();
  };

  return (
    <div className="header-middle">
      <div className="container flex items-center justify-between">
        <div className="header-middle-left d-flex align-items-center">
          <Link href="/">
            <Image
              src="https://nguyencongpc.vn/media/lib/18-02-2025/logowhite-dfvefb.png"
              width="170"
              height="38"
              alt="logo"
              className="logo-header"
            />
          </Link>
          <button className="icon-showroom flex items-center justify-center" onClick={PopupAddress}>
            <FaMapMarkerAlt size={16} />
          </button>
        </div>
        <div className="header-middle-right flex items-center">
          <div className="header-menu-category">
            <div className="box-title flex items-center justify-center gap-8">
              <FaBars size={16} />
              <p className="title-menu font-weight-500">Danh mục sản phẩm</p>
            </div>
            <div className="cau-noi"></div>
          </div>
          <div className="header-search-group">
            <form method="get" action="/tim" name="searchForm">
              <div className="box-search-input">
                <input
                  type="text"
                  id="js-search-box"
                  name="q"
                  className="form-group-input"
                  placeholder="Bạn cần tìm gì?"
                />
              </div>
              <button
                type="submit"
                id="js-search-button"
                aria-label="submit-search"
                className="search-btn-header"
              >
                <i className="sprite sprite-search-header icon-search"></i>
              </button>
            </form>

            <div className="search-results">
              <div className="search-results-list"></div>
            </div>
          </div>

          <div className="box-tabs-header d-flex align-items-center">
            <Link
              href="/buildpc"
              className="item-tab-header d-flex flex-column align-items-center gap-4"
            >
              <p className="icon-item-tab d-flex align-items-center justify-content-center">
                <i className="sprite sprite-buildpc-header"></i>
              </p>
              <span className="font-weight-500">Xây dựng cấu hình</span>
            </Link>

            <Link
              href="javascript:void(0)"
              className="item-tab-header d-flex flex-column align-items-center gap-4"
            >
              <p className="icon-item-tab d-flex align-items-center justify-content-center">
                <i className="sprite sprite-lienhe-header"></i>
              </p>
              <span className="font-weight-500">Khách hàng liên hệ</span>
            </Link>

            <Link
              href="/tin-tuc"
              className="item-tab-header d-flex flex-column align-items-center gap-4"
            >
              <p className="icon-item-tab d-flex align-items-center justify-content-center">
                <i className="sprite sprite-article-header"></i>
              </p>
              <span className="font-weight-500">Tin tức công nghệ</span>
            </Link>

            <div id="js-header-cart" className="position-relative">
              <Link
                href="/cart"
                className="item-tab-header d-flex flex-column align-items-center gap-4"
              >
                <p className="icon-item-tab icon-cart-header d-flex align-items-center justify-content-center">
                  <i className="sprite sprite-cart-header"></i>
                  <u className="cart-count header-features-cart-amount">1</u>
                </p>
                <span className="font-weight-500">Giỏ hàng</span>
              </Link>
              <div className="cau-noi"></div>
              <div className="cart-ttip" id="js-cart-tooltip">
                <div className="cart-ttip-item-container"></div>
                <div className="cart-ttip-price d-flex align-items-center justify-content-end gap-6">
                  <p>Tổng tiền hàng</p>
                  <p id="js-header-cart-quantity" className="font-weight-500"></p>
                  <p id="js-header-cart-total-price" className="font-weight-700"></p>
                </div>
                <Link
                  href="/cart"
                  className="cart-ttip-price-button d-flex align-items-center justify-content-center"
                >
                  <p className="font-weight-700">THANH TOÁN NGAY </p>
                </Link>
              </div>
            </div>

            <Link
              href="/taikhoan"
              className="user-header item-tab-header d-flex flex-column align-items-center gap-4"
            >
              <p className="icon-item-tab d-flex align-items-center justify-content-center">
                <i className="sprite sprite-account-header"></i>
              </p>
              <span className="font-weight-500">Tài khoản</span>
            </Link>
          </div>
        </div>
      </div>
      <BoxShowroom />
    </div>
  );
};

export default HeaderMid;