import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import "../../style/footer.css";
import Cart from "../../assets/images/cart_footer.svg";
import News from "../../assets/images/news_footer.svg";
import Order from "../../assets/images/order.svg";
import Profile from "../../assets/images/profile.svg";
import Home from "../../assets/images/home.svg";

const Footer: React.FunctionComponent = () => {
  const navigate = useNavigate();

  return (
    <div className="footer p-4 w-full fixed bottom-0 right-0 shadow-[0px -10px 16px rgba(93, 112, 140, 0.03)] bg-no-repeat">
      <div className="bottom-bar">
        <div className="button">
          <Link to="/cart">
            <div className="button">
              <img src={Cart} />
              <p>Giỏ hàng</p>
            </div>
          </Link>
        </div>
        <div className="button">
          <Link to="/news">
            <div className="button">
              <img src={News} />
              <p>Tin Tức</p>
            </div>
          </Link>
        </div>
        <div className="button">
          <Link to="/">
            <div className="button">
              <img src={Order} />
              <p>Đơn hàng</p>
            </div>
          </Link>
        </div>
        <div className="button">
          <Link to="/account">
            <div className="button">
              <img src={Profile} />
              <p>Tài khoản</p>
            </div>
          </Link>
        </div>
      </div>
      <div className="home ">
        <Link to="/">
          <div className="button">
            <img
              src={Home}
              className="w-[25px] h-[25px] absolute left-[50%] top-[2.5%] mt-[5px]"
            />
          </div>
        </Link>
      </div>
    </div>
  );
};

export default Footer;