frontend/apps/sn/app/(map-layout)/map/components/InputSection.tsx

import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@common/components/ui";
import React from "react";

interface InputSectionProps {
  title: string;
  data: { year: string; type: string }[];
  sectionKey: string;
  onInputChange: (section: string, index: number, field: string, value: string) => void;
}

const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, onInputChange }) => {
  return (
    <div>
      {/* 섹션 제목 */}
      <div className="card-header">
        <h3 className="text-2xl mx-3 font-medium text-label">{title}</h3>
      </div>
      {/* 테이블 */}
      <div className="card !m-[1.2rem] !p-0r">
        <Table variant="secondary" className="w-full">
          <TableHeader>
            <TableRow>
              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-[80px]">년도</TableHead>
              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto">구분</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((row, index) => (
              <TableRow key={index}>
                <TableCell className="border border-gray-300 px-2 py-2 text-sm w-[80px]">
                  <input
                    type="text"
                    value={row.year}
                    onChange={(e) => onInputChange(sectionKey, index, "year", e.target.value)}
                    className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
                  />
                </TableCell>
                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto">
                  {row.type}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
};

export default InputSection;