import React from "react";

type OrgBoxProps = {
  label: string;
  onClick: () => void;
};

const OrgBox: React.FC<OrgBoxProps> = ({ label, onClick }) => {
  return (
    <button
      onClick={onClick}
      className="bg-white hover:bg-agri-primary-light shadow rounded-2xl p-4 text-center w-full
                 transition hover:shadow-lg active:scale-95 
                 font-medium bg-agri-primary/10 text-gray-700"
    >
      {label}
    </button>
  );
};

type OrgGovProps = {
  onITRMClick: () => void;
};

const GraphGov: React.FC<OrgGovProps>= ({onITRMClick}) => {
  const handleClick = (label: string) => {
    alert(`You clicked on ${label}`);
    // Replace alert with your navigation or modal logic
  };

  return (
    <div className="flex min-h-screen bg-gray-50 p-6">
      <div className="flex flex-col gap-4 w-full max-w-3xl">

        {/* Leaders */}
        <OrgBox label="Leaders" onClick={() => handleClick("Leaders")} />

        {/* ROC & ITSC */}
        <div className="grid grid-cols-2 gap-4">
          <OrgBox label="ROC" onClick={() => handleClick("ROC")} />
          <OrgBox label="ITSC" onClick={() => handleClick("ITSC")} />
        </div>

        {/* Internal & External Auditors */}
        <div className="grid grid-cols-2 gap-4">
          <OrgBox label="Internal Auditors" onClick={() => handleClick("Internal Auditors")} />
          <OrgBox label="External Auditors" onClick={() => handleClick("External Auditors")} />
        </div>

        {/* IT Risk Management */}
        <OrgBox label="IT Risk Management" onClick={() => onITRMClick()} />

        {/* Business / Technology / Project */}
        <div className="grid grid-cols-3 gap-4">
          <OrgBox label="Business" onClick={() => handleClick("Business")} />
          <OrgBox label="Technology" onClick={() => handleClick("Technology")} />
          <OrgBox label="Project" onClick={() => handleClick("Project")} />
        </div>

      </div>
    </div>
  );
};

export default GraphGov;
