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

interface ActDescriptionProps {
    actId: number;
    summary: string;
    onUpdateSummary: (actId: number, summary: string) => void;
}

export default function ActDescription({actId, summary, onUpdateSummary}: ActDescriptionProps) {
    const t = useTranslations('actComponent');
    
    function getActSummaryTitle(actId: number): string {
        switch (actId) {
            case 1:
                return t('act1Summary');
            case 4:
                return t('act4Summary');
            case 5:
                return t('act5Summary');
            default:
                return t('actSummary');
        }
    }
    
    function getActSummaryPlaceholder(actId: number): string {
        switch (actId) {
            case 1:
                return t('act1SummaryPlaceholder');
            case 4:
                return t('act4SummaryPlaceholder');
            case 5:
                return t('act5SummaryPlaceholder');
            default:
                return t('actSummaryPlaceholder');
        }
    }
    
    return (
        <div className="mb-4">
            <InputField
                fieldName={getActSummaryTitle(actId)}
                input={
                    <TexteAreaInput
                        value={summary || ''}
                        setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
                            onUpdateSummary(actId, e.target.value)
                        }
                        placeholder={getActSummaryPlaceholder(actId)}
                    />
                }
                actionIcon={faTrash}
                actionLabel={t('delete')}
            />
        </div>
    );
}