import { X } from 'lucide-react';
import { FileViewerProvider } from './FileViewerProvider';
import { FileViewerHeader } from './FileViewerHeader';
import { FileViewerBody } from './FileViewerBody';

type FileViewerViewProps = {
  filePath: string;
  fileName: string;
  root?: string;
  content?: string;
  onClose?: () => void;
};

export const FileViewerView = ({ filePath, fileName, root, content, onClose }: FileViewerViewProps) => (
  <FileViewerProvider filePath={filePath} fileName={fileName} root={root} content={content}>
    <div className="h-full flex flex-col">
      <div className="shrink-0 flex items-center gap-2 px-4 py-1.5 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 text-duck-dark/70 dark:text-foreground/70">
        <FileViewerHeader />
        {onClose && (
          <button
            onClick={onClose}
            className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 transition-colors cursor-pointer"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        )}
      </div>
      <div className="flex-1 min-h-0">
        <FileViewerBody />
      </div>
    </div>
  </FileViewerProvider>
);
