import React, { ReactNode } from "react";
import { Box } from "../../Box";

export interface SelectOptionCategoryProps {
  titleSlot: ReactNode;
  children: ReactNode;
}

export const SelectOptionCategory = ({
  titleSlot,
  children,
}: SelectOptionCategoryProps) => {
  return (
    <>
      <Box
        as="li"
        className="text-h6 uppercase font-medium text-gray-600 px-3 pb-1 pt-2"
      >
        {titleSlot}
      </Box>
      {children}
    </>
  );
};