import { css } from "@emotion/react";
import type { PropsWithChildren } from "react";

import { Heading } from "@phoenix/components/core/content";

/**
 * A SectionHeading is a component that displays a heading with borders.
 *
 * It is well suited for "labeling" a DisclosureGroup or other sections of content.
 */
export const SectionHeading = ({
  children,
  bordered = true,
}: PropsWithChildren & {
  /**
   * If true, the section heading will have a border at the top and bottom
   * If false, the section heading will have a border at the bottom only
   * */
  bordered?: boolean;
}) => {
  return (
    <div
      data-bordered={bordered}
      css={css`
        border-bottom: 1px solid var(--global-border-color-default);
        &[data-bordered="true"] {
          border-top: 1px solid var(--global-border-color-default);
        }
        & > * {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: var(--global-dimension-size-100)
            var(--global-dimension-size-200);
        }
      `}
    >
      <Heading>{children}</Heading>
    </div>
  );
};
