"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, trailing, 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-6 w-6", icon.props?.className),
        })
        : icon;
    return (_jsx(DialogHeader, { className: cn("bg-white rounded-t-2xl border-b px-6 py-4", headerClassName), children: _jsxs(DialogTitle, { className: cn("flex items-center gap-3 text-xl font-medium tracking-tight", className), children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-center rounded-xl", children: sizedIcon }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "leading-tight", children: title }), subtitle && (_jsx("span", { className: "text-muted-foreground text-xs font-normal", children: subtitle }))] }), trailing && (_jsx("div", { className: "mr-8 ml-auto flex items-center", children: trailing }))] }) }));
}
//# sourceMappingURL=styled-dialog-title.js.map