import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../utils/cn.js";
import { Image } from "../image/image.js";
const SimpleTitle = React.forwardRef(
  ({ title, subtitle, image, size = "default", controls, className, ...props }, ref) => {
    const isCompact = size === "compact";
    const hasImage = Boolean(image);
    const hasControls = Boolean(controls);
    const rowView = isCompact || !hasImage;
    const imageSize = isCompact ? "w-[72px] h-[72px] md:w-[100px] md:h-[100px]" : "w-[114px] h-[114px] md:w-[120px] md:h-[120px]";
    const titleClasses = cn(
      "font-semibold text-strong",
      isCompact ? "text-lg md:text-xl" : "text-xl md:text-2xl"
    );
    const subtitleContent = typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "text-subtle whitespace-pre-wrap", children: subtitle }) : subtitle;
    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", size, className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
      hasImage && /* @__PURE__ */ jsx(
        Image,
        {
          src: image,
          alt: title,
          containerClassName: cn(
            imageSize,
            "rounded-xl bg-subtle shrink-0"
          ),
          fit: "cover"
        }
      ),
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            "flex flex-col flex-wrap gap-2 justify-between md:flex-row md:flex-nowrap md:items-center md:justify-between flex-1 min-w-0",
            rowView && "flex-row justify-between",
            !hasControls && rowView && "items-center",
            !hasControls && !rowView && "justify-center"
          ),
          children: [
            /* @__PURE__ */ jsxs(
              "div",
              {
                className: cn(
                  "min-w-0 max-w-full break-words",
                  rowView && "self-center"
                ),
                children: [
                  /* @__PURE__ */ jsx("h1", { className: titleClasses, children: title }),
                  subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1", children: subtitleContent })
                ]
              }
            ),
            controls && /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "shrink-0 flex gap-1.5 md:self-center",
                  rowView && "self-center"
                ),
                children: controls
              }
            )
          ]
        }
      )
    ] }) });
  }
);
SimpleTitle.displayName = "SimpleTitle";
const ImageTitle = React.forwardRef(
  ({ title, subtitle, image, size = "default", controls, className, ...props }, ref) => {
    const isCompact = size === "compact";
    const hasControls = Boolean(controls);
    const imageHeight = isCompact ? "h-[200px] md:h-[200px]" : "h-[280px] md:h-[280px]";
    const imageWidth = isCompact ? "md:w-[280px]" : "md:w-[392px]";
    const subtitleContent = typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "text-subtle whitespace-pre-wrap", children: subtitle }) : subtitle;
    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", size, className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-4 w-full", children: [
      image && /* @__PURE__ */ jsx(
        Image,
        {
          src: image,
          alt: title,
          containerClassName: cn(
            "w-full",
            imageHeight,
            imageWidth,
            "rounded-t-xl md:rounded-xl bg-subtle",
            "md:block"
          ),
          fit: "cover"
        }
      ),
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            "flex flex-col flex-1 gap-4 p-4 md:py-0 min-w-0",
            hasControls ? "justify-between" : "justify-center"
          ),
          children: [
            /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full break-words", children: [
              /* @__PURE__ */ jsx(
                "h1",
                {
                  className: cn(
                    "font-semibold text-strong",
                    isCompact ? "text-xl md:text-2xl" : "text-2xl md:text-3xl"
                  ),
                  children: title
                }
              ),
              subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1", children: subtitleContent })
            ] }),
            controls && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: controls })
          ]
        }
      )
    ] }) });
  }
);
ImageTitle.displayName = "ImageTitle";
const CoverTitle = React.forwardRef(
  ({
    title,
    subtitle,
    image,
    coverImage,
    size = "default",
    controls,
    className,
    ...props
  }, ref) => {
    const isCompact = size === "compact";
    const hasProfileImage = Boolean(image);
    const coverHeight = isCompact ? "h-[110px] md:h-[150px]" : "h-[150px] md:h-[200px]";
    const profileSize = isCompact ? "w-[100px] h-[100px] md:w-[120px] md:h-[120px]" : "w-[100px] h-[100px] md:w-[120px] md:h-[120px]";
    const subtitleContent = typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "text-subtle whitespace-pre-wrap", children: subtitle }) : subtitle;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("w-full relative", size, className),
        ...props,
        children: [
          coverImage ? /* @__PURE__ */ jsx(
            Image,
            {
              src: coverImage,
              alt: "",
              containerClassName: cn(
                "w-full",
                coverHeight,
                "rounded-t-xl md:rounded-t-none"
              ),
              fit: "cover"
            }
          ) : /* @__PURE__ */ jsx("div", { className: cn("w-full bg-accent/10", coverHeight) }),
          /* @__PURE__ */ jsx("div", { className: "px-4 md:px-6 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 pt-4 min-w-0", children: [
            hasProfileImage && /* @__PURE__ */ jsx("div", { className: "relative h-[50px] md:h-0", children: /* @__PURE__ */ jsx(
              Image,
              {
                src: image,
                alt: title,
                containerClassName: cn(
                  profileSize,
                  "rounded-xl ring-2 ring-background -translate-y-1/2 md:-translate-y-[55%]"
                ),
                fit: "cover"
              }
            ) }),
            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 justify-start flex-col gap-4 min-w-0 md:flex-row md:items-center", children: [
              /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full break-words flex-1", children: [
                /* @__PURE__ */ jsx(
                  "h1",
                  {
                    className: cn(
                      "font-semibold text-strong",
                      isCompact ? "text-lg md:text-xl" : "text-xl md:text-2xl"
                    ),
                    children: title
                  }
                ),
                subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1", children: subtitleContent })
              ] }),
              controls && /* @__PURE__ */ jsx("div", { className: "shrink-0 self-start md:self-center", children: controls })
            ] })
          ] }) })
        ]
      }
    );
  }
);
CoverTitle.displayName = "CoverTitle";
const ProfileTitle = React.forwardRef(
  ({
    title,
    subtitle,
    image,
    coverImage,
    size = "default",
    controls,
    className,
    ...props
  }, ref) => {
    const isCompact = size === "compact";
    const noCover = !coverImage;
    const coverHeight = isCompact ? "h-[110px] md:h-[150px]" : "h-[150px] md:h-[200px]";
    const profileSize = isCompact ? "w-[80px] h-[80px] md:w-[100px] md:h-[100px]" : "w-[100px] h-[100px] md:w-[120px] md:h-[120px]";
    const subtitleContent = typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "text-subtle whitespace-pre-wrap text-center", children: subtitle }) : subtitle;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("w-full relative", size, className),
        ...props,
        children: [
          coverImage ? /* @__PURE__ */ jsx(
            Image,
            {
              src: coverImage,
              alt: "",
              containerClassName: cn("w-full", coverHeight),
              fit: "cover"
            }
          ) : /* @__PURE__ */ jsx("div", { className: cn("h-[100px] md:h-[120px]") }),
          /* @__PURE__ */ jsx("div", { className: "px-4 md:px-6 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 md:gap-6 max-w-full", children: [
            image && /* @__PURE__ */ jsx(
              Image,
              {
                src: image,
                alt: title,
                containerClassName: cn(
                  profileSize,
                  "rounded-full ring-2",
                  noCover ? "ring-4 ring-accent/30 -mt-[40px] md:-mt-[50px]" : "ring-background -mt-[50px] md:-mt-[60px]"
                ),
                fit: "cover"
              }
            ),
            /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full break-words text-center", children: [
              /* @__PURE__ */ jsx(
                "h1",
                {
                  className: cn(
                    "font-semibold text-strong text-center",
                    isCompact ? "text-lg md:text-xl" : "text-xl md:text-2xl"
                  ),
                  children: title
                }
              ),
              subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1", children: subtitleContent })
            ] }),
            controls && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: controls })
          ] }) })
        ]
      }
    );
  }
);
ProfileTitle.displayName = "ProfileTitle";
const ScreenTitle = React.forwardRef(
  (props, ref) => {
    const { variant } = props;
    const Component = {
      simple: SimpleTitle,
      image: ImageTitle,
      cover: CoverTitle,
      profile: ProfileTitle
    }[variant];
    return /* @__PURE__ */ jsx(Component, { ...props, ref });
  }
);
ScreenTitle.displayName = "ScreenTitle";
export {
  ScreenTitle
};
