import { styled } from "goober";
import { Button } from "@wordpress/components";
import type * as React from "react";

export const TitleInfoHeader = styled("span")<{ size?: "normal" | "large", weight?: "normal" | "bold" }>`
  display: block;
  font-size: ${({ size }) => (size === "large" ? "1rem" : "14px")};
  font-weight: ${({ weight }) => (weight === "bold" ? "bold" : "normal")};
  line-height: ${({ size }) => (size === "large" ? "1.5" : "1.25")};
  hyphens: auto;
`;

export const TitleInfoContainer = styled("span")<{ size?: "normal" | "large" }>`
  display: block;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  font-weight: 400;
`;

type ButtonProps = React.ComponentProps<typeof Button>;

export type BadgeProps = {
} & ButtonProps;

export const Badge = styled(Button as unknown as React.ReactElement)<BadgeProps>`
  text-transform: uppercase !important;
  font-weight: 500 !important;
`;