'use client';

import type { RecordingListProps } from '@/types/component-props';
import RecordingCard from './RecordingCard';

export default function RecordingList({
  recordings,
  isLoading = false,
  onSelectRecording,
  onDeleteRecording,
}: RecordingListProps) {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
        <span className="ml-3 text-gray-600">Loading recordings...</span>
      </div>
    );
  }

  if (recordings.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500 text-lg">No recordings yet</p>
        <p className="text-gray-400 text-sm mt-2">Start recording to see your voice notes here</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {recordings.map((recording) => (
        <RecordingCard
          key={recording.id}
          recording={recording}
          onClick={onSelectRecording}
          onDelete={onDeleteRecording}
        />
      ))}
    </div>
  );
}