import { Link } from "react-router-dom";
import { Icon } from "./icon";

interface WorkspaceHeaderProps {
  project: {
    id: string;
    name: string;
    description?: string | null;
  };
  currentRepo?: {
    id: string;
    name: string;
  } | null;
}

export const WorkspaceHeader = ({ project, currentRepo }: WorkspaceHeaderProps) => {
  return (
    <div className="workspace-header">
      <div className="workspace-header-left">
        <div className="workspace-header-icon">
          <Icon name="folder" size="lg" />
        </div>
        <div className="workspace-header-info">
          <h1 className="workspace-header-title">{project.name}</h1>
          {currentRepo && (
            <span className="workspace-header-subtitle">{currentRepo.name}</span>
          )}
        </div>
      </div>
      <div className="workspace-header-actions">
        <Link
          className="workspace-header-action-btn"
          to={`/projects/${project.id}/repositories/${currentRepo?.id || ""}/history`}
        >
          <Icon name="history" size="sm" />
          History
        </Link>
        <Link
          className="workspace-header-action-btn"
          to={`/projects/${project.id}/settings`}
        >
          <Icon name="settings" size="sm" />
          Settings
        </Link>
      </div>
    </div>
  );
};