import { FrameworkType } from '../../types';
import { FRAMEWORKS } from '../../types/project';
import { ArrowLeft, Save, Cloud, Download, Globe, Monitor, Smartphone, Server } from 'lucide-react';

interface ToolbarProps {
  projectName: string;
  framework: FrameworkType;
  onBack: () => void;
  onSave: () => void;
  saving: boolean;
  leftContent?: React.ReactNode;
  rightContent?: React.ReactNode;
}

export default function Toolbar({
  projectName,
  framework,
  onBack,
  onSave,
  saving,
  leftContent,
  rightContent,
}: ToolbarProps) {
  const fw = FRAMEWORKS[framework] || FRAMEWORKS.web;
  const getIcon = () => {
    switch (framework) {
      case 'web': return Globe;
      case 'electron': return Monitor;
      case 'maui': return Smartphone;
      case 'nodejs': return Server;
      default: return Globe;
    }
  };
  const Icon = getIcon();

  return (
    <div className="h-12 glass border-b border-surface-700 flex items-center justify-between px-3 gap-3">
      {/* Left Section */}
      <div className="flex items-center gap-3 flex-1">
        <button onClick={onBack} className="btn-ghost p-1.5" title="Back to Dashboard">
          <ArrowLeft className="w-4 h-4" />
        </button>
        <div className="flex items-center gap-2">
          <div className={`w-7 h-7 rounded-md bg-gradient-to-br ${fw.gradient} flex items-center justify-center`}>
            <Icon className="w-4 h-4 text-white" />
          </div>
          <h2 className="text-sm font-semibold text-white truncate max-w-[200px]">
            {projectName}
          </h2>
          <span className={fw.badgeClass}>{fw.name}</span>
        </div>
        {leftContent}
      </div>

      {/* Right Section */}
      <div className="flex items-center gap-2">
        {rightContent}
      </div>
    </div>
  );
}