wing-ops/frontend/src/pages/design/components/ButtonCatalogSection.tsx

import pdfFileIcon from '../../../assets/icons/wing-pdf-file.svg';
import pdfFileDisabledIcon from '../../../assets/icons/wing-pdf-file-disabled.svg';

interface ButtonRow {
  label: string;
  defaultBtn: React.ReactNode;
  hoverBtn: React.ReactNode;
  disabledBtn: React.ReactNode;
}

const buttonRows: ButtonRow[] = [
  {
    label: '프라이머리 (그라디언트)',
    defaultBtn: (
      <div
        className='rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'
        style={{
          background: 'linear-gradient(120.41deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
        }}
      >
        <div className='text-white text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          실행
        </div>
      </div>
    ),
    hoverBtn: (
      <div
        className='rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'
        style={{
          background: 'linear-gradient(120.41deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
          boxShadow: '0px 0px 12px 0px rgba(6, 182, 212, 0.4)',
        }}
      >
        <div className='text-white text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          확인
        </div>
      </div>
    ),
    disabledBtn: (
      <div
        className='bg-[#334155] rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'
        style={{ opacity: 0.5 }}
      >
        <div className='text-[#64748b] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          저장
        </div>
      </div>
    ),
  },
  {
    label: '세컨더리 (솔리드)',
    defaultBtn: (
      <div className='bg-[#1a2236] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[#b0b8cc] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          취소
        </div>
      </div>
    ),
    hoverBtn: (
      <div className='bg-[#1e2844] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[#b0b8cc] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          닫기
        </div>
      </div>
    ),
    disabledBtn: (
      <div className='bg-[rgba(26,34,54,0.50)] rounded-md border border-solid border-[rgba(30,42,66,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[rgba(176,184,204,0.30)] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          취소
        </div>
      </div>
    ),
  },
  {
    label: '아웃라인 (고스트)',
    defaultBtn: (
      <div className='rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[#b0b8cc] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          더보기
        </div>
      </div>
    ),
    hoverBtn: (
      <div className='bg-[#1e2844] rounded-md border border-solid border-[#1e2a42] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[#b0b8cc] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          필터
        </div>
      </div>
    ),
    disabledBtn: (
      <div className='rounded-md border border-solid border-[rgba(30,42,66,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[rgba(176,184,204,0.30)] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          더보기
        </div>
      </div>
    ),
  },
  {
    label: 'PDF 액션',
    defaultBtn: (
      <div className='bg-[rgba(59,130,246,0.08)] rounded-md border border-solid border-[rgba(59,130,246,0.30)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative'>
        <img
          className='shrink-0 relative overflow-visible'
          src={pdfFileIcon}
          alt='PDF 아이콘'
        />
        <div className='text-[#3b82f6] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          PDF 다운로드
        </div>
      </div>
    ),
    hoverBtn: (
      <div
        className='bg-[rgba(59,130,246,0.15)] rounded-md border border-solid border-[rgba(59,130,246,0.50)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative'
        style={{ boxShadow: '0px 0px 8px 0px rgba(59, 130, 246, 0.2)' }}
      >
        <img
          className='shrink-0 relative overflow-visible'
          src={pdfFileIcon}
          alt='PDF 아이콘'
        />
        <div className='text-[#3b82f6] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          PDF 다운로드
        </div>
      </div>
    ),
    disabledBtn: (
      <div className='bg-[rgba(59,130,246,0.04)] rounded-md border border-solid border-[rgba(59,130,246,0.10)] pt-1.5 pr-3 pb-1.5 pl-3 flex flex-row gap-2 items-center justify-start shrink-0 relative'>
        <img
          className='shrink-0 relative overflow-visible'
          src={pdfFileDisabledIcon}
          alt='PDF 아이콘 (비활성)'
        />
        <div className='text-[rgba(59,130,246,0.40)] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          PDF 다운로드
        </div>
      </div>
    ),
  },
  {
    label: '경고 (삭제)',
    defaultBtn: (
      <div className='bg-[rgba(239,68,68,0.10)] rounded-md border border-solid border-[rgba(239,68,68,0.30)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[#ef4444] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          삭제
        </div>
      </div>
    ),
    hoverBtn: (
      <div
        className='bg-[rgba(239,68,68,0.20)] rounded-md border border-solid border-[rgba(239,68,68,0.50)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'
        style={{ boxShadow: '0px 0px 8px 0px rgba(239, 68, 68, 0.15)' }}
      >
        <div className='text-[#ef4444] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          삭제
        </div>
      </div>
    ),
    disabledBtn: (
      <div className='bg-[rgba(239,68,68,0.05)] rounded-md border border-solid border-[rgba(239,68,68,0.15)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative'>
        <div className='text-[rgba(239,68,68,0.40)] text-center font-korean text-[11px] font-medium relative flex items-center justify-center'>
          초기화
        </div>
      </div>
    ),
  },
];

export const ButtonCatalogSection = () => {
  return (
    <div className='bg-[#1a2236] rounded-[10px] border border-solid border-[#1e2a42] flex flex-col gap-0 items-start justify-start overflow-hidden w-full'>
      {/* 카드 헤더 */}
      <div className='border-b border-solid border-[#1e2a42] pt-4 pr-6 pb-4 pl-6 flex flex-row gap-3 items-center justify-start self-stretch shrink-0 relative'>
        <div className='bg-[#06b6d4] rounded-xl shrink-0 w-1 h-4 relative' />
        <div
          className='text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start'
          style={{ letterSpacing: '1.2px' }}
        >
          제어 인터페이스: 버튼
        </div>
      </div>

      {/* 테이블 본문 */}
      <div className='p-6 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative overflow-hidden'>
        <div className='flex flex-col items-start justify-start self-stretch shrink-0 relative'>
          {/* 헤더 행 */}
          <div className='border-b border-solid border-[#1e2a42] flex flex-row gap-0 items-start justify-center self-stretch shrink-0 relative'>
            {['버튼 유형', '기본 상태', '호버 상태', '비활성 상태'].map((header) => (
              <div
                key={header}
                className='pt-px pr-2 pb-[17.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative'
              >
                <div
                  className='text-[#64748b] text-left font-korean text-xs font-medium uppercase relative flex items-center justify-start'
                  style={{ letterSpacing: '-0.55px' }}
                >
                  {header}
                </div>
              </div>
            ))}
          </div>

          {/* 데이터 행 */}
          <div
            className='flex flex-col items-start justify-start self-stretch shrink-0 relative'
            style={{ margin: '-1px 0 0 0' }}
          >
            {buttonRows.map((row, index) => (
              <div
                key={row.label}
                className='border-t border-solid border-[rgba(30,42,66,0.50)] flex flex-row gap-0 items-start justify-center self-stretch shrink-0 relative'
                style={index === 0 ? { borderTopColor: 'transparent' } : { margin: '-1px 0 0 0' }}
              >
                {/* 버튼 유형 레이블 */}
                <div className='pt-[31.5px] pr-2 pb-[31.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative'>
                  <div className='text-[#bcc9cd] text-left font-korean text-xs font-medium relative flex items-center justify-start'>
                    {row.label}
                  </div>
                </div>

                {/* 기본 상태 */}
                <div className='pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative'>
                  {row.defaultBtn}
                </div>

                {/* 호버 상태 */}
                <div className='pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative'>
                  {row.hoverBtn}
                </div>

                {/* 비활성 상태 */}
                <div className='pt-[24.5px] pr-2 pb-[24.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative'>
                  {row.disabledBtn}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};