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

interface InputSectionProps {
  title: string;
  data: { year: string; type: string; bizInfoNm: string; bizType: 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="mx-3 whitespace-nowrap text-2xl font-medium text-label">
          {title}
        </h3>
      </div>
      {/* 테이블 */}
      <div className="card !p-0r !m-[1.2rem]">
        <Table variant="secondary" className="w-full">
          <TableHeader>
            <TableRow>
              <TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
                구분
              </TableHead>
              <TableHead className="w-[80px] whitespace-nowrap border border-border px-2 py-2 text-sm">
                진단연도
              </TableHead>
              <TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
                사업명
              </TableHead>
              <TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
                유형
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((row, index) => (
              <TableRow key={index}>
                <TableCell className="w-auto whitespace-nowrap border border-border px-2 py-2 text-center text-sm leading-normal">
                  {row.type}
                </TableCell>
                <TableCell className="w-[80px] whitespace-nowrap border border-border px-2 py-2 text-sm">
                  <input
                    type="text"
                    value={row.year}
                    onChange={(e) =>
                      onInputChange(sectionKey, index, "year", e.target.value)
                    }
                    className="border-radius-0 w-full px-3 py-2 text-center text-base text-xl leading-normal"
                  />
                </TableCell>
                <TableCell className="w-auto border border-border px-2 py-2 text-center text-sm leading-normal">
                  {row.bizInfoNm}
                </TableCell>
                <TableCell className="w-auto whitespace-nowrap border border-border px-2 py-2 text-center text-sm leading-normal">
                  {row.bizType}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
};

export default InputSection;