import React from 'react';
import { useCaptureStore } from '../../store/captureStore';
import { secondsToTimecode } from '../../utils/timecode';

interface Props {
  onSeek: (time: number) => void;
}

export default function CaptureList({ onSeek }: Props) {
  const { captures, removeCapture, clearCaptures } = useCaptureStore();

  if (captures.length === 0) {
    return (
      <div className="text-gray-500 text-xs p-4 text-center">
        캡처된 프레임이 없습니다<br />
        <span className="text-gray-600">Shift+S로 캡처</span>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between px-3 py-1">
        <span className="text-xs text-gray-400">{captures.length}개</span>
        <button
          onClick={clearCaptures}
          className="text-xs text-gray-500 hover:text-red-400 transition-colors"
        >
          전체 삭제
        </button>
      </div>
      <div className="flex-1 overflow-y-auto space-y-1 px-2 pb-2">
        {captures.map((cap) => (
          <div
            key={cap.id}
            className="group relative cursor-pointer rounded overflow-hidden border border-gray-700 hover:border-blue-500 transition-colors"
            onClick={() => onSeek(cap.time)}
          >
            <img
              src={cap.dataUrl}
              alt={cap.filename}
              className="w-full h-auto object-cover"
              draggable={false}
            />
            <div className="absolute bottom-0 left-0 right-0 bg-black/70 px-2 py-0.5 flex items-center justify-between">
              <span className="text-xs text-white font-mono">
                {secondsToTimecode(cap.time)}
              </span>
              <button
                onClick={(e) => { e.stopPropagation(); removeCapture(cap.id); }}
                className="text-xs text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
                title="삭제"
              >
                ✕
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
