import React from "react";

type BoxProps = {
  left: string;
  top: string;
  color?: string;
  text: string;
  type?: "default" | "vertical";
};

type LineProps = {
  width: string;
  height: string;
  left: string;
  top: string;
};


// Box 컴포넌트에 타입 적용
const Box: React.FC<BoxProps> = ({
                                   left,
                                   top,
                                   color = "#70CCBF",
                                   text,
                                   type = "default",
                                 }) => {
  return (
    <div className={`absolute ${left} ${top} ${type === 'vertical' ? 'rotate-90' : ''}`}>
      <div className="relative w-[191px] h-[46px]">
        <svg width="191" height="46" viewBox="0 0 191 46" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill={color}
                d="M177.145 0.211548H165.717H149.626H41.4384H24.949H13.9197L0.151367 22.8621L13.9197 45.5128H24.949H41.4384H149.626H165.717H177.145L190.913 22.8621L177.145 0.211548Z"/>
        </svg>
        <div
          className={`absolute text-center left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-pre text-white text-base font-medium font-['Noto_Sans_KR'] ${type === 'vertical' ? 'rotate-270' : ''}`}>
          <span>{text}</span>
        </div>
      </div>
    </div>
  );
};

// Line 컴포넌트에 타입 적용
const Line: React.FC<LineProps> = ({width, height, left, top}) => (
  <div className={`absolute ${width} ${height} ${left} ${top} outline outline-offset-[-0.5px] outline-neutral-600`}/>
);

const Organization: React.FC = () => {
  const lines = [
    {width: "w-0", height: "h-[755.07px]", left: "left-[435.65px]", top: "top-[17.12px]"},
    {width: "w-35", height: "h-0", left: "left-[300px]", top: "top-[137.81px]"},
    {width: "w-35", height: "h-0", left: "left-[438px]", top: "top-[137.81px]"},
    {width: "w-36", height: "h-0", left: "left-[291px]", top: "top-[483.41px]"},
    {width: "w-72", height: "h-0", left: "left-[295.29px]", top: "top-[713.97px]"},
    {width: "w-0", height: "h-56", left: "left-[133.48px]", top: "top-[772.19px]"},
    {width: "w-0", height: "h-56", left: "left-[356.20px]", top: "top-[772.19px]"},
    {width: "w-0", height: "h-56", left: "left-[708.63px]", top: "top-[772.19px]"},
    {width: "w-144", height: "h-0", left: "left-[133px]", top: "top-[772.12px]"},
    {width: "w-55.5", height: "h-0", left: "left-[21.17px]", top: "top-[919.23px]"},
    {width: "w-[485.21px]", height: "h-0", left: "left-[466.11px]", top: "top-[919.23px]"},
    {width: "w-0", height: "h-20", left: "left-[21.30px]", top: "top-[919.23px]"},
    {width: "w-0", height: "h-20", left: "left-[466.11px]", top: "top-[919.23px]"},
    {width: "w-0", height: "h-20", left: "left-[587.36px]", top: "top-[919.23px]"},
    {width: "w-0", height: "h-20", left: "left-[829.84px]", top: "top-[919.23px]"},
    {width: "w-0", height: "h-20", left: "left-[951.07px]", top: "top-[919.23px]"},
    {width: "w-0", height: "h-20", left: "left-[244.48px]", top: "top-[919.23px]"},
  ];

  const boxes = [
    // 기존 상단 박스
    {left: "left-[342.99px]", top: "top-0", color: "#1e3a8a", text: "대표이사"},
    {left: "left-[343px]", top: "top-[230.41px]", color: "#1e3a8a", text: "부사장"},
    {left: "left-[342.99px]", top: "top-[345.62px]", color: "#1e3a8a", text: "전무이사"},
    {left: "left-[126.55px]", top: "top-[460.83px]", color: "#70CCBF", text: "품질경영실"},
    {left: "left-[559.44px]", top: "top-[115.21px]", color: "#70CCBF", text: "고문"},
    {left: "left-[121.15px]", top: "top-[115.21px]", color: "#70CCBF", text: "안전보건팀"},
    {left: "left-[343px]", top: "top-[576.02px]", color: "#1e3a8a", text: "상무이사"},
    {left: "left-[260.78px]", top: "top-[806.44px]", color: "#8883BB", text: "경영지원팀장"},
    {left: "left-[613.32px]", top: "top-[806.44px]", color: "#8883BB", text: "공사관리팀장"},
    {left: "left-[38.33px]", top: "top-[806.44px]", color: "#8883BB", text: "생산 및 영업팀장"},
    {left: "left-[126.55px]", top: "top-[691.23px]", color: "#8883BB", text: "서울경기지사"},
    {left: "left-[559px]", top: "top-[691.23px]", color: "#8883BB", text: "경남지사"},

    // 하단 박스 추가 (세로)
    {left: "left-[-75px]", top: "top-[1060px]", type: "vertical" as const, color: "#8883BB", text: "생\n산\n팀"},
    {left: "left-[37px]", top: "top-[1060px]",  type: "vertical" as const, color: "#8883BB", text: "자\n재\n관\n리\n팀"},
    {left: "left-[148px]", top: "top-[1060px]", type: "vertical" as const, color: "#8883BB", text: "영\n업\nA\nS\n팀"},
    {left: "left-[260px]", top: "top-[1060px]", type: "vertical" as const, color: "#8883BB", text: "총\n무\n경\n리\n팀"},
    {left: "left-[370px]", top: "top-[1060px]", type: "vertical" as const, color: "#a3a3a3", text: "정\n보\n통\n신\n설\n비"},
    {left: "left-[491px]", top: "top-[1060px]", type: "vertical" as const, color: "#a3a3a3", text: "기\n간\n망\nS\nI\n팀"},
    {left: "left-[613px]", top: "top-[1060px]", type: "vertical" as const, color: "#a3a3a3", text: "보\n안\n설\n비\n팀"},
    {left: "left-[734px]", top: "top-[1060px]", type: "vertical" as const, color: "#4b5563", text: "전\n기\n설\n비\n팀"},
    {left: "left-[855px]", top: "top-[1060px]", type: "vertical" as const, color: "#4b5563", text: "소\n방\n설\n비\n팀"}
  ];

  return (
    <div className="relative flex justify-center h-[1300px] mx-auto max-w-7xl mt-20">
      <div className="relative w-[974px] h-[1190px]">
        {lines.map((l, i) => <Line key={i} {...l} />)}
        {boxes.map((b, i) => <Box key={i} {...b} />)}
      </div>
    </div>
  );
};

export default Organization;