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

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

const ReadEntry: React.FC<ReadEntryProps> = ({
  entry,
  onDelete,
  onUpdate,
  onReset,
  onSave
}) => {
  const renderContent = (data: IOEntryData) => (
    <div className="space-y-3">
      <div>
        <span className="text-sm font-medium text-gray-700">Content:</span>
        <pre className="mt-1 text-sm text-gray-900 bg-gray-50 p-2 rounded whitespace-pre-wrap">{data.content || ''}</pre>
      </div>
      <div>
        <span className="text-sm text-gray-700">
          {data.read ? '✓ Read' : '✗ Not Read'}
        </span>
      </div>
    </div>
  );

  const renderEditForm = (
    data: IOEntryData,
    onChange: (data: IOEntryData) => void,
    isLoading: boolean
  ) => (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Content</label>
        <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={4}
          disabled={isLoading}
        />
      </div>
      <div>
        <label className="flex items-center">
          <input
            type="checkbox"
            checked={data.read || false}
            onChange={e => onChange({ ...data, read: e.target.checked })}
            className="rounded border-gray-300"
            disabled={isLoading}
          />
          <span className="ml-2 text-sm text-gray-700">Read</span>
        </label>
      </div>
    </div>
  );

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

export default ReadEntry;