import { ReactNode } from "react"

import { BsThreeDots } from "react-icons/bs"

interface TitleProps {
    children: ReactNode
    titleType?: "small" | "normal" | "large"
    showOptions?: boolean
}

const Title = ({
    children,
    titleType = "normal",
    showOptions = false,
    className = "",
}: TitleProps) => {
    const cName = className + (titleType === "small"
        ? " text-sm text-muted-foreground"
        : titleType === "large"
            ? " text-lg font-bold"
            : " text-base font-bold")
    return (
        <div className={"flex justify-between mb-4 ".concat(cName)}>
            <div className="capitalize">{children}</div>
            {showOptions && <BsThreeDots className="cursor-pointer" />}
        </div>
    )
}

export { Title }
