/** Header for the workspace detail page. */

import { Icon } from "../../icon";

export interface WorkspaceDetailHeaderProps {
	workspace: {
		name: string;
		repo_name: string;
		project_name: string;
		branch: string;
	};
}

export function WorkspaceDetailHeader({
	workspace,
}: WorkspaceDetailHeaderProps) {
	return (
		<header className="workspace-header">
			<div className="workspace-breadcrumb">
				<span>{workspace.project_name}</span>
				<span className="sep">/</span>
				<span>{workspace.repo_name}</span>
				<span className="sep">/</span>
				<strong>{workspace.name}</strong>
			</div>
			<div className="workspace-actions">
				<span className="branch-badge">
					<Icon name="branch" size="sm" /> {workspace.branch}
				</span>
			</div>
		</header>
	);
}
