'use client';

/**
 * 정보 테이블 공통 컴포넌트 (라벨-값 구조)
 *
 * @example
 * <InfoTable
 *   rows={[
 *     [{ label: '발주처', value: '(주)현대건설' }, { label: '현장명', value: '판교 테크노밸리' }],
 *     [{ label: '작업일자', value: '2026-01-22' }, { label: 'LOT NO.', value: 'KD-WO-260122' }],
 *   ]}
 * />
 *
 * // 단일 열
 * <InfoTable
 *   columns={1}
 *   rows={[
 *     [{ label: '비고', value: '특이사항 없음' }],
 *   ]}
 * />
 */

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

export interface InfoTableCell {
  /** 라벨 */
  label: string;
  /** 값 (문자열 또는 ReactNode) */
  value: ReactNode;
  /** 라벨 너비 (기본: w-24) */
  labelWidth?: string;
  /** 값 colSpan */
  colSpan?: number;
}

export interface InfoTableProps {
  /** 행 데이터 (2차원 배열: 행 > 셀) */
  rows: InfoTableCell[][];
  /** 열 개수 (기본: 2) */
  columns?: 1 | 2 | 3 | 4;
  /** 라벨 너비 (기본: w-24) */
  labelWidth?: string;
  /** 추가 className */
  className?: string;
}

export function InfoTable({
  rows,
  columns = 2,
  labelWidth = 'w-24',
  className,
}: InfoTableProps) {
  return (
    <div className={cn('border border-gray-300', className)}>
      {rows.map((row, rowIndex) => (
        <div
          key={rowIndex}
          className={cn(
            'grid',
            columns === 1 && 'grid-cols-1',
            columns === 2 && 'grid-cols-2',
            columns === 3 && 'grid-cols-3',
            columns === 4 && 'grid-cols-4',
            rowIndex < rows.length - 1 && 'border-b border-gray-300'
          )}
        >
          {row.map((cell, cellIndex) => (
            <div
              key={cellIndex}
              className={cn(
                'flex',
                cellIndex < row.length - 1 && 'border-r border-gray-300'
              )}
              style={cell.colSpan ? { gridColumn: `span ${cell.colSpan}` } : undefined}
            >
              <div
                className={cn(
                  'bg-gray-100 p-3 text-sm font-medium border-r border-gray-300 flex items-center shrink-0',
                  cell.labelWidth || labelWidth
                )}
              >
                {cell.label}
              </div>
              <div className="flex-1 p-3 text-sm flex items-center">
                {cell.value}
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}
