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">년도</TableHead>
                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {data.map((row, index) => (
                            <TableRow key={index}>
                                <TableCell className="border border-gray-300 px-2 py-2 text-sm">
                                    <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">
                                    {row.type}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        </div>
    );
};

export default InputSection;