"use client";

import React from 'react';
import { X } from 'lucide-react';
import { useEditorStore } from '@/store/editor-store';
import { cn, getFileIcon } from '@/lib/utils';

export function FileTabs() {
  const { openFiles, activeFileId, setActiveFile, closeFile } = useEditorStore();

  if (openFiles.length === 0) {
    return null;
  }

  return (
    <div className="flex items-center bg-surface border-b border-gray-800 overflow-x-auto">
      {openFiles.map((file: any) => (
        <div
          key={file.id}
          className={cn(
            "flex items-center gap-2 px-4 py-2 border-r border-gray-800 cursor-pointer transition-colors group min-w-fit",
            activeFileId === file.id
              ? "bg-background text-white"
              : "bg-surface text-gray-400 hover:text-gray-200"
          )}
          onClick={() => setActiveFile(file.id)}
        >
          <span className="text-sm">{getFileIcon(file.name)}</span>
          <span className="text-sm">{file.name}</span>
          {file.isDirty && (
            <span className="w-2 h-2 rounded-full bg-primary" />
          )}
          <button
            className="ml-2 opacity-0 group-hover:opacity-100 hover:bg-gray-700 rounded p-0.5 transition-opacity"
            onClick={(e) => {
              e.stopPropagation();
              closeFile(file.id);
            }}
          >
            <X className="w-3 h-3" />
          </button>
        </div>
      ))}
    </div>
  );
}