"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { DialogHeader, DialogTitle } from "./dialog";
import { cn } from "../../lib/utils";
export function StyledDialogTitle({ icon, title, subtitle, className, headerClassName, }) {
    // Clone the icon and apply size classes if it's a React element
    const sizedIcon = React.isValidElement(icon)
        ? React.cloneElement(icon, {
            className: cn("h-8 w-8", icon.props?.className),
        })
        : icon;
    return (_jsx(DialogHeader, { className: cn("rounded-t-2xl border-b bg-gray-50/50 px-6 py-4", headerClassName), children: _jsxs(DialogTitle, { className: cn("flex items-center gap-2 text-xl font-semibold tracking-tight", className), children: [_jsx("div", { className: "flex items-center justify-center rounded-xl text-primary", children: sizedIcon }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "leading-tight", children: title }), subtitle && (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: subtitle }))] })] }) }));
}
//# sourceMappingURL=styled-dialog-title.js.map