import React from 'react';
import { BaseEntry } from './BaseEntry';
import { ReasoningEntryData } from '../../../types/entries';

interface ReasoningEntryProps {
  entry: ReasoningEntryData;
  onDelete: (id: string) => void;
  onUpdate: (id: string) => void;
  onReset: (id: string) => void;
  onSave: (id: string, data: ReasoningEntryData) => Promise<void>;
}

const ReasoningEntry: React.FC<ReasoningEntryProps> = ({
  entry,
  onDelete,
  onUpdate,
  onReset,
  onSave
}) => {
  const renderContent = (data: ReasoningEntryData) => (
    <p className="text-sm text-gray-700 whitespace-pre-wrap">{data.content}</p>
  );

  const renderEditForm = (
    data: ReasoningEntryData,
    onChange: (data: ReasoningEntryData) => void,
    isLoading: boolean
  ) => (
    <div className="mt-2">
      <textarea
        value={data.content}
        onChange={(e) => onChange({ ...data, content: e.target.value })}
        className="w-full p-2 border rounded font-mono text-sm resize-vertical"
        rows={6}
        disabled={isLoading}
      />
    </div>
  );

  return (
    <BaseEntry
      entry={entry}
      onDelete={onDelete}
      onUpdate={onUpdate}
      onReset={onReset}
      onSave={onSave}
      renderContent={renderContent}
      renderEditForm={renderEditForm}
    />
  );
};

export default ReasoningEntry;