import React from 'react';
import type { Slide } from '../../../types/presentation.ts';
import './SlideThumbnail.css';

interface SlideThumbnailProps {
  slide: Slide;
  index: number;
  isActive: boolean;
  isDisabled?: boolean;
  onClick: () => void;
  onDoubleClick?: () => void;
  onEdit: () => void;
  onDuplicate: () => void;
  onDelete: () => void;
}

export const SlideThumbnail: React.FC<SlideThumbnailProps> = ({
  slide,
  index,
  isActive,
  isDisabled = false,
  onClick,
  onDoubleClick,
  onEdit,
  onDuplicate,
  onDelete
}) => {
  return (
    <div
      className={`slide-thumbnail ${isActive ? 'active' : ''}`}
      onClick={onClick}
      onDoubleClick={onDoubleClick}
    >
      <div className="thumbnail-number">{index + 1}</div>
      <div className="thumbnail-preview">
        <div className="thumbnail-content">
          <span className="layout-name">{slide.layoutId}</span>
          <span className="content-count">
            {Object.keys(slide.content).length} items
          </span>
        </div>
      </div>
      <div className="thumbnail-actions">
        <button
          type="button"
          className="thumbnail-action edit"
          onClick={(e) => {
            e.stopPropagation();
            onEdit();
          }}
          title="Edit slide content"
          disabled={isDisabled}
        >
          ✏️
        </button>
        <button
          type="button"
          className="thumbnail-action"
          onClick={(e) => {
            e.stopPropagation();
            onDuplicate();
          }}
          title="Duplicate slide"
          disabled={isDisabled}
        >
          ⧉
        </button>
        <button
          type="button"
          className="thumbnail-action delete"
          onClick={(e) => {
            e.stopPropagation();
            onDelete();
          }}
          title="Delete slide"
          disabled={isDisabled}
        >
          ✕
        </button>
      </div>
    </div>
  );
};