import React from "react";
import { useNavigate } from "react-router-dom";
import FrameImage from "../assets/images/page2.svg";

const StatusPage = () => {
  const navigate = useNavigate();

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
      <h1 className="absolute top-[50.5px] left-[330px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
      
      {/* Main White Box */}
      <div className="absolute top-[132px] left-[304px] w-[120%] max-w-7xl h-[729px] rounded-[32.6px] shadow-[0px_3.91px_11.74px_0px_#2E268414] bg-white flex flex-row overflow-hidden border border-gray-200 p-7">

        {/* Left Side - Illustration */}
        <div className="hidden md:flex md:w-1/2 items-center justify-end p-6 pr-16"> 
          <img 
            src={FrameImage} 
            alt="Illustration" 
            className="w-[100%] h-auto cursor-pointer" 
            onClick={() => navigate("/agent-status")} 
          />
        </div>
        
        {/* Vertical Divider */}
        <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>

        {/* Right Side - Status Section */}
        <div className="w-full md:w-1/2 flex flex-col justify-center px-4 md:px-8 py-6 relative">
        <h2 className="text-3xl font-semibold text-gray-900 mb-20 text-left">Status</h2>
          
          {/* Status Box */}
          <div className="top-[-12%] w-[572px] h-[305px] relative bg-[#F9A78D] rounded-2xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-5">
            <div className="absolute right-10 top-4 md:right-6 md:top-[37px]">
              <div className="w-40 md:w-40 h-9 md:h-11 rounded-[50px] outline outline-[3px] outline-offset-[-3px] outline-[#FF3D00] flex items-center justify-center">
                <span className="text-[#101418] text-base md:text-[21.81px] font-medium font-['Montserrat']">
                  Pending
                </span>
              </div>
            </div>
            
            <div className="mt-16 md:mt-0 space-y-6">
              <div>
                <div className="text-gray-600 text-lg md:text-xl font-medium font-['Montserrat'] leading-loose tracking-tight">
                  Company Name
                </div>
                <div className="text-black text-lg md:text-xl font-semibold font-['Montserrat'] leading-loose tracking-tight">
                  ABCD PVT LTD
                </div>
              </div>
              
              <div>
                <div className="text-gray-600 text-lg md:text-xl font-medium font-['Montserrat'] leading-loose tracking-tight">
                  Company Address
                </div>
                <div className="text-black text-lg md:text-xl font-medium font-['Montserrat'] tracking-tight">
                  Shop No: 45 ABC Street <br /> 
                  Mylapore <br /> 
                  Chennai - 600004
                </div>
              </div>
              
              <div>
                <div className="text-gray-600 text-lg md:text-xl font-medium font-['Montserrat'] leading-loose tracking-tight">
                  Agent Details
                </div>
                <div className="text-black text-lg md:text-xl font-medium font-['Montserrat'] tracking-tight">
                  Not Available
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};  

export default StatusPage;