import { top_header_data } from "../../utils/data";
import { Link } from "react-router-dom";
import styles from "./header.module.css";

const TopHeader = () => {
  return (
    <>
      <div className="flex flex-col sm:hidden bg-[#5c2684]">
        <ul className="flex flex-col justify-center items-center pt-[0.4rem] text-[13px] font-light">
          {["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
            <li key={text} className="w-full">
              <a
                href="#"
                className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}
              >
                {text}
              </a>
            </li>
          ))}
          <li className="w-full flex items-center justify-center">
            <a
              href="#"
              className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}
            >
              <p className="uppercase">Today's Share price:</p>
              <span className="text-[#F8B51F] text-base md:text-lg">
                $ 4.00
              </span>
            </a>
          </li>
        </ul>
      </div>
      <div className={styles.top_header}>
        <div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
          <ul className="flex items-center py-[0.4rem] flex-wrap">
            {top_header_data.map(({ id, name, href }) => (
              <li key={id}>
                <Link to={href} className={`py-[11px] px-[15px]`}>
                  {name}
                </Link>
              </li>
            ))}
          </ul>
          <div className="hidden sm:flex gap-2 items-center bg-[#74449E] px-2 text-[11px] md:text-[13px]">
            <p className="uppercase">Today's Share price:</p>
            <span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
          </div>
        </div>
      </div>
    </>
  );
};

export default TopHeader;