import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { Heading } from "../Heading";
import { SmallCaps } from "../SmallCaps";
import { bem } from "../../utilities/bem";

const cn = "Meta";

export interface MetaProps extends BoxProps {
  heading: string;
  headingAs?: string;
}

export const Meta = (props: MetaProps) => {
  const { children, heading, headingAs = "h3", className, ...rest } = props;

  return (
    <Box className={classNames(bem(cn), className)} {...rest}>
      <Heading as={headingAs} className="mb-1">
        <SmallCaps>{heading}</SmallCaps>
      </Heading>
      <Box className="font-medium text-gray-700">{children}</Box>
    </Box>
  );
};