"use client";
import { bp } from "./breakpoints.js";
import { firstChild, pxToRems } from "./utils.js";
import styled from "@emotion/styled";
import { css, useTheme } from "@emotion/react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/styles/type.tsx
const defaultHeadingSizes = {
	h1: {
		size: 32,
		sizeSm: 21
	},
	h2: {
		size: 24,
		sizeSm: 18
	},
	h3: {
		size: 21,
		sizeSm: 18
	},
	h4: {
		size: 14,
		sizeSm: 14
	}
};
const defaultHeadingMargins = {
	h1: {
		mt: 24,
		mb: 24,
		mtSm: 24,
		mbSm: 24
	},
	h2: {
		mt: 24,
		mb: 24,
		mtSm: 24,
		mbSm: 24
	},
	h3: {
		mt: 24,
		mb: 24,
		mtSm: 24,
		mbSm: 24
	},
	h4: {
		mt: 16,
		mb: 16,
		mtSm: 16,
		mbSm: 16
	}
};
const baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => css`
  line-height: 1.214em;

  margin-bottom: ${mb}px;
  margin-top: ${mt}px;

  ${bp.sm(`
    margin-top: ${mtSm}px;
    margin-bottom: ${mbSm}px;
  `)}
`;
const firstChildStyles = firstChild(`margin-top: 0;`);
const headings = {
	h1: styled.h1`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h1.size)};
    font-weight: ${({ light }) => light ? 400 : 800}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h1.sizeSm)};
    `)}
  `,
	h2: styled.h2`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h2.size)};
    font-weight: ${({ light }) => light ? 400 : 700}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h2.sizeSm)};
    `)}
  `,
	h3: styled.h3`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h3.size)};
    font-weight: ${({ light }) => light ? 400 : 700}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h3.sizeSm)};
    `)}
  `,
	h4: styled.h4`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h4.size)};
    font-weight: ${({ light }) => light ? 400 : 600}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h4.sizeSm)};
    `)}
  `
};
function Heading({ children, type = "h2", id, mt = defaultHeadingMargins[type].mt, mb = defaultHeadingMargins[type].mb, mtSm = defaultHeadingMargins[type].mtSm, mbSm = defaultHeadingMargins[type].mbSm, m0 = false, light = false }) {
	const StyledHeading = headings[type];
	const theme = useTheme();
	return /* @__PURE__ */ jsx(StyledHeading, {
		id,
		mt: m0 ? 0 : mt,
		mb: m0 ? 0 : mb,
		mtSm: m0 ? 0 : mtSm,
		mbSm: m0 ? 0 : mbSm,
		light,
		theme,
		children: id ? /* @__PURE__ */ jsx("a", {
			href: `#${id}`,
			css: { color: "inherit" },
			children
		}) : children
	});
}
function headingWithDefaults(defaultProps) {
	return (props) => /* @__PURE__ */ jsx(Heading, {
		...defaultProps,
		...props
	});
}
//#endregion
export { Heading, headingWithDefaults, headings };
