import type {BoardListItem} from "../type/boardMaster.types.ts";
import type {SearchParams} from "../../../../../type/searchParams.ts";
import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";

interface BoardListTableRowProps {
    item: BoardListItem
    index: number
    searchParams: SearchParams
    totalItems: number
    currentPage: number
    totalPages: number
    checked: boolean
    onCheck: (id: string, checked: boolean) => void
    onDetail: (bbsId: string) => void
    onArticleList: (bbsId: string) => void
    onPreview: (bbsId: string) => void
}

export function BoardListTableRow({
                                      item,
                                      index,
                                      searchParams,
                                      totalItems,
                                      currentPage,
                                      totalPages,
                                      checked,
                                      onCheck,
                                      onDetail,
                                      onArticleList,
                                      onPreview
                                  }: BoardListTableRowProps) {
    const rowNumber = searchParams.searchSortOrd === 'DESC'
        ? totalItems - (currentPage - 1) * totalPages - index
        : (currentPage - 1) * totalPages + (index + 1)
    const bbsId = item.bbsId;

    return (
        <tr>
            <td>
                <CheckBox
                    id={`boardCheckList_${bbsId}`}
                    name="checkList"
                    value={bbsId}
                    checked={checked}
                    onChange={(nextChecked) => onCheck(bbsId, nextChecked)}
                />
            </td>
            <td>{rowNumber}</td>
            <td>{item.bbsNm}</td>
            <td>{item.menuNm}</td>
            <td>
                {item.newCnt}/{item.totCnt}
            </td>
            <td>{item.bbsTyCodeNm}</td>
            <td>{item.frstRegisterPnttm}</td>
            <td>
                {item.useAt === 'Y' ? (
                    <span className="status text blue">사용</span>
                ) : (
                    <span className="status text gray">미사용</span>
                )}
            </td>
            <td>
                <div className="btn_wrap center">
                    <button className="btn line primary small" onClick={() => onDetail(bbsId)}>수정</button>
                    <button className="btn line lightgray small" onClick={() => onArticleList(bbsId)}>게시판보기</button>
                    <button className="btn line lightgray small" onClick={() => onPreview(bbsId)}>홈페이지</button>
                </div>
            </td>
        </tr>
    )
}