import { BsCart4 } from "react-icons/bs";
import { RiAlignLeft } from "react-icons/ri";
import { Link } from "react-router-dom";
import { FaUserCircle } from "react-icons/fa";
import { MdFavorite } from "react-icons/md";
import { IoLogOut } from "react-icons/io5";
import { TbCircleLetterEFilled } from "react-icons/tb";
import { MdOutlineDashboard } from "react-icons/md";
import { FiShoppingBag } from "react-icons/fi";
import Navbar from "../../components/Elements/Navbar"
import Button from "../../components/Elements/Buttons";

const Order = () => {
  return (
    <>
      <Navbar name="Order"></Navbar>

      <div className="m-3">
        <div class="flex flex-col bg-white border shadow-sm rounded-xl m-2">
          <div class="border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 flex justify-between">
            <div class="date flex">
              <p class="text-[#939393]">Estimated Delivery:</p>
              <p>22-08-2024</p>
            </div>
            <div class="status">
              <p class="font-bold text-[#AFA0D7] text-lg">Order in Delivery</p>
            </div>
          </div>
          <div class="p-4 md:p-5 grid grid-cols-1 md:grid-cols-12 gap-4">
            <div class="flex justify-center col-span-4 md:col-span-3">
              <img
                src="/public/image/Rectangle 48.png"
                alt="..."
                class="max-w-full h-auto"
              />
            </div>
            <div class="flex flex-col justify-center col-span-4 md:col-span-6">
              <h1 class="font-bold">Exclusive Savva Gift Box | Merchandize</h1>
              <p>X1</p>
              <div class="price flex mt-5">
                <p class="font-bold text-[#AFA0D7] mr-2">$36.00 USD</p>
                <p class="line-through">$40.00 USD</p>
              </div>
            </div>
            <div class="flex flex-col justify-center col-span-4 md:col-span-3 gap-2">
              <button
                type="button"
                class="py-3 w-full text-sm font-medium rounded-lg border border-transparent bg-[#AFA0D7] text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
              >
                Mark
              </button>
              <button
                type="button"
                class="py-3 w-full text-sm font-medium rounded-lg border border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 focus:outline-none focus:border-blue-600 focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:hover:text-blue-500 dark:hover:border-blue-600 dark:focus:text-blue-500 dark:focus:border-blue-600"
              >
                Buy More
              </button>
              <button
                type="button"
                class="py-3 w-full text-sm font-medium rounded-lg border border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 focus:outline-none focus:border-blue-600 focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:hover:text-blue-500 dark:hover:border-blue-600 dark:focus:text-blue-500 dark:focus:border-blue-600"
              >
                Contact Seller
              </button>
            </div>
          </div>
          <div class="border-t rounded-b-xl py-3 px-4 md:py-4 md:px-5 flex justify-end">
            <p>Total orders :</p>
            <p class="text-[#AFA0D7] text-lg font-bold ml-2">24.000</p>
          </div>
        </div>

        <div class="flex flex-col bg-white border shadow-sm rounded-xl m-2">
          <div class="border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 flex justify-between">
            <div class="date flex">
              <p class="text-[#939393]">Estimated Delivery:</p>
              <p>22-08-2024</p>
            </div>
            <div class="status">
              <p class="font-bold text-[#AFA0D7] text-lg">Finished</p>
            </div>
          </div>
          <div class="p-4 md:p-5 grid grid-cols-1 md:grid-cols-12 gap-4">
            <div class="flex justify-center col-span-4 md:col-span-3">
              <img
                src="/public/image/Rectangle 48.png"
                alt="..."
                class="max-w-full h-auto"
              />
            </div>
            <div class="flex flex-col justify-center col-span-4 md:col-span-6">
              <h1 class="font-bold">Exclusive Savva Gift Box | Merchandize</h1>
              <p>X1</p>
              <div class="price flex mt-5">
                <p class="font-bold text-[#AFA0D7] mr-2">$36.00 USD</p>
                <p class="line-through">$40.00 USD</p>
              </div>
            </div>
            <div class="flex flex-col justify-center col-span-4 md:col-span-3 gap-2">
              <button
                type="button"
                class="py-3 w-full text-sm font-medium rounded-lg border border-transparent bg-[#AFA0D7] text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
              >
                Mark
              </button>
              <button
                type="button"
                class="py-3 w-full text-sm font-medium rounded-lg border border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 focus:outline-none focus:border-blue-600 focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-blue-500 dark:hover:border-blue-600 dark:focus:text-blue-500 dark:focus:border-blue-600"
              >
                Buy More
              </button>
              <button
                type="button"
                class="py-3 w-full text-sm font-medium rounded-lg border border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 focus:outline-none focus:border-blue-600 focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-blue-500 dark:hover:border-blue-600 dark:focus:text-blue-500 dark:focus:border-blue-600"
              >
                Contact Seller
              </button>
            </div>
          </div>
          <div class="border-t rounded-b-xl py-3 px-4 md:py-4 md:px-5 flex justify-end">
            <p>Total orders :</p>
            <p class="text-[#AFA0D7] text-lg font-bold ml-2">24.000</p>
          </div>
        </div>
      </div>
    </>
  );
};

export default Order;
