import "react";
import { jsx as e, jsxs as t } from "react/jsx-runtime";
import { ArrowLeft as n } from "lucide-react";
//#region src/features/workspaces/components/workflow-form/HeaderSection.tsx
var r = ({ icon: r, title: i, description: a, showBack: o, onBack: s }) => /* @__PURE__ */ t("div", {
	className: "mb-6",
	children: [o && /* @__PURE__ */ t("button", {
		onClick: s,
		className: "text-muted-foreground hover:text-foreground group mb-4 flex items-center gap-2 text-sm transition-colors",
		children: [/* @__PURE__ */ e(n, { className: "h-4 w-4 transition-transform group-hover:-translate-x-1" }), /* @__PURE__ */ e("span", { children: "Back to Selection" })]
	}), /* @__PURE__ */ t("div", {
		className: "flex items-start gap-4",
		children: [/* @__PURE__ */ e("div", {
			className: "border-border flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg border",
			children: r
		}), /* @__PURE__ */ t("div", {
			className: "min-w-0 flex-1",
			children: [/* @__PURE__ */ e("h2", {
				className: "text-foreground mb-1 text-xl font-semibold",
				children: i
			}), a && /* @__PURE__ */ e("p", {
				className: "text-muted-foreground text-sm leading-relaxed",
				children: a
			})]
		})]
	})]
});
//#endregion
export { r as default };
