import React, { ReactNode } from "react";
import { useColorModeValue, Heading, HeadingProps } from "@chakra-ui/react";

interface ListTitleProps extends HeadingProps {
	children: ReactNode;
}

export function ListTitle({ children, ...rest }: ListTitleProps) {
	const color = useColorModeValue("gray.400", "gray.600");

	return (
		<Heading
			display="flex"
			overflow="hidden"
			flexDirection="column"
			flexShrink={0}
			justifyContent="flex-end"
			color={color}
			fontWeight="600"
			textOverflow="ellipsis"
			whiteSpace="nowrap"
			fontSize="12px"
			p={4}
			{...rest}
		>
			{children}
		</Heading>
	);
}