import React from 'react';
import type { Keyword } from '../types';
import { EditableCard } from './EditableCard';

interface Step2KeywordsProps {
    keywords: Keyword[];
    onKeywordsChange: (keywords: Keyword[]) => void;
    t: any;
}

const Step2Keywords: React.FC<Step2KeywordsProps> = ({ keywords, onKeywordsChange, t }) => {
    return (
        <div>
            <h2 className="text-2xl font-bold mb-4">{t.title}</h2>
            <p className="text-light-subtle dark:text-brand-light mb-6">{t.subtitle}</p>
            
            <EditableCard<Keyword>
                title={t.cardTitle}
                items={keywords}
                onItemsChange={onKeywordsChange}
                fieldConfigs={[
                    { key: 'term', label: t.termLabel, type: 'text' },
                    { key: 'rationale', label: t.rationaleLabel, type: 'textarea' },
                ]}
                newItemTemplate={{ term: '', rationale: '' }}
                renderDisplay={(item) => (
                    <div>
                        <strong className="text-light-text dark:text-white">{item.term}</strong>
                        <p className="text-light-subtle dark:text-brand-light text-sm mt-1">{item.rationale}</p>
                    </div>
                )}
                t={t.editableCard}
            />
        </div>
    );
};

export default Step2Keywords;