import React, {ChangeEvent} from 'react';
import {faTrash} from '@fortawesome/free-solid-svg-icons';
import {ActChapter} from '@/lib/models/Chapter';
import InputField from '@/components/form/InputField';
import TexteAreaInput from '@/components/form/TexteAreaInput';
import {useTranslations} from 'next-intl';

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="bg-secondary/20 p-4 rounded-xl mb-3 border border-secondary/30 shadow-sm hover:shadow-md transition-all duration-200">
            <InputField
                input={
                    <TexteAreaInput
                        value={chapter.summary || ''}
                        setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
                            onUpdateSummary(chapter.chapterId, e.target.value)
                        }
                        placeholder={t('chapterSummaryPlaceholder')}
                    />
                }
                actionIcon={faTrash}
                fieldName={chapter.title}
                action={(): Promise<void> => onUnlink(chapter.chapterInfoId, chapter.chapterId)}
                actionLabel={t('remove')}
            />
        </div>
    );
}