import React, {ChangeEvent} from 'react';
import {Trash2} from 'lucide-react';
import {ActChapter} from '@/lib/types/chapter';
import InputField from '@/components/form/InputField';
import TextAreaInput from '@/components/form/TextAreaInput';
import {useTranslations} from '@/lib/i18n';

interface ActChapterItemProps {
    chapter: ActChapter;
    onUpdateSummary: (chapterId: string, summary: string) => void;
    onUnlink: (chapterInfoId: string, chapterId: string) => Promise<void>;
}

export default function ActChapterItem({chapter, onUpdateSummary, onUnlink}: ActChapterItemProps) {
    const t = useTranslations('actComponent');
    
    return (
        <div className="mb-3">
            <InputField
                input={
                    <TextAreaInput
                        value={chapter.summary || ''}
                        setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
                            onUpdateSummary(chapter.chapterId, e.target.value)
                        }
                        placeholder={t('chapterSummaryPlaceholder')}
                    />
                }
                actionIcon={Trash2}
                fieldName={chapter.title}
                action={(): Promise<void> => onUnlink(chapter.chapterInfoId, chapter.chapterId)}
                actionLabel={t('remove')}
            />
        </div>
    );
}