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

const AgentAssigned = () => {
  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>
      <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-center p-6">
          <img 
            src={FrameImage} 
            alt="Illustration" 
            className="w-[100%] h-auto cursor-pointer" 
            onClick={() => navigate("/agent-verified")} // Navigates to AgentVerified.jsx
          />
        </div>
        
        {/* Vertical Divider */}
        <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>

        <div className="w-full md:w-1/2 flex flex-col justify-center px-8 py-6 relative">
          <h2 className="text-3xl font-semibold text-gray-900 mb-6 text-left">Status</h2>
          
          <div className="top-[-1%] w-[572px]  h-[410px] relative bg-[#FFF1CC] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
            {/* Company Name */}
            <div className="absolute top-[17px] left-[22px] w-[183px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
              Company Name
            </div>
            <div className="absolute top-[57px] left-[44px] w-[154px] h-[32px] text-[#000000] text-[20px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
              ABCD PVT LTD
            </div>


            {/* Company Address */}
            <div className="absolute top-[100px] left-[28px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
              Company Address
            </div>
            <div className="absolute top-[132px] left-[41px] w-[247px] h-[72px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">
              Shop No: 45 ABC Street <br />
              Mylapore <br />
              Chennai - 600004
            </div>
            {/* Agent Details */}
            <div className="absolute top-[219px] left-[33px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
              Agent Details
            </div>
            <div className="absolute top-[255px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Name</div>
            <div className="absolute top-[293px] left-[49px] w-[85px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">Gopal M</div>
            <div className="absolute top-[325px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Number</div>
            <div className="absolute top-[363px] left-[48px] w-[164px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">+91-12345 69870</div>
            
            {/* Status Label (Previously Button) */}
            <div className="absolute top-[38px] left-[333px] w-[210px] h-[45px] gap-[10px] rounded-full border-4 border-[#FFD255] text-black text-lg font-medium px-[10px] py-[11px] flex items-center justify-center">
              Agent Assigned
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AgentAssigned;