import type {ChangeEvent} from 'react';
import {RichTextEditor} from '../../../component/editor/RichTextEditor.tsx';
import type {ContentFormItem} from '../type/content.types.ts';

type ContentFormTableProps = {
    form: ContentFormItem;
    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
    onContentChange: (value: string) => void;
    disabled?: boolean;
};

export const ContentFormTable = ({
                                     form,
                                     onChange,
                                     onContentChange,
                                     disabled = false,
                                 }: ContentFormTableProps) => {
    return (
        <div className="table table_type_rows">
            <table>
                <colgroup>
                    <col style={{width: '200px'}}/>
                    <col style={{width: 'auto'}}/>
                </colgroup>

                <tbody>
                <tr>
                    <th>
                        <span className="required">*</span>
                        콘텐츠 이름
                    </th>
                    <td>
                        <input
                            type="text"
                            className="input"
                            id="cntName"
                            name="cntName"
                            value={form.cntName}
                            onChange={onChange}
                            disabled={disabled}
                        />
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        내용
                    </th>
                    <td>
                        <RichTextEditor
                            value={form.cntCn}
                            onChange={onContentChange}
                            disabled={disabled}
                        />
                    </td>
                </tr>

                {form.registPnttm ? (
                    <tr>
                        <th>최종수정일</th>
                        <td>
                            <input
                                type="text"
                                className="input"
                                value={form.registPnttm}
                                readOnly
                            />
                        </td>
                    </tr>
                ) : null}

                {form.registerId ? (
                    <tr>
                        <th>작성자</th>
                        <td>
                            <input
                                type="text"
                                className="input"
                                value={form.registerId}
                                readOnly
                            />
                        </td>
                    </tr>
                ) : null}

                </tbody>
            </table>
        </div>
    );
};