"use client";

import React from 'react';
import { Folder, File } from 'lucide-react';

interface Note {
  id: string;
  title: string;
  lastModified: string;
  size: number;
  type: string;
  mime: string;
  etag: string;
  content?: string;
}

interface FileListProps {
  notes: Note[];
  onNoteSelect: (note: Note) => void;
  currentFolder: string;
  onFolderChange: (folder: string) => void;
  loading: boolean;
}

export function FileList({ notes, onNoteSelect, currentFolder, onFolderChange, loading }: FileListProps) {
  const folders = ['Notes', 'Diary', 'Health', 'Contacts'];

  if (loading) {
    return (
      <div className="p-4">
        <div className="h-4 w-full bg-gray-200 rounded animate-pulse"></div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Folders */}
      <div className="p-4 space-y-2">
        {folders.map((folder) => (
          <button
            key={folder}
            onClick={() => onFolderChange(folder)}
            className={`w-full flex items-center space-x-2 px-4 py-2 rounded-lg ${
              currentFolder === folder
                ? 'bg-primary/10 text-primary'
                : 'hover:bg-gray-100'
            }`}
          >
            <Folder className="h-4 w-4" />
            <span>{folder}</span>
          </button>
        ))}
      </div>

      {/* Notes */}
      <div className="flex-1 overflow-y-auto p-4 space-y-2">
        {notes.map((note) => (
          <button
            key={note.id}
            onClick={() => onNoteSelect(note)}
            className="w-full flex items-center space-x-2 px-4 py-2 rounded-lg hover:bg-gray-100"
          >
            <File className="h-4 w-4" />
            <span className="truncate">{note.title}</span>
          </button>
        ))}
      </div>
    </div>
  );
}