const box = tw.style({
    display: "flex",
    alignItems: "items-center",
    justifyContent: "justify-center",

    paddingX: "px-[2.25px]",
    paddingY: "py-1",
    ":hover": {
        opacity: "hover:opacity-90",
    },
    "@sm": {
        paddingX: "sm:px-[4.5px]",
        paddingY: "sm:py-2",
    },
})

const Box = ({ children }) => <div className={box.class}>{children}</div>

const themeBtn = tw.toggle({
    truthy: {}, // 🌝 light mode
    falsy: {}, // 🌚 dark mode
    base: {}, // [optional] base style
})

const ThemeBtn = ({ children }) => {
    const [isLight, setIsLight] = useState(false)

    return <button className={themeBtn.class(isLight)}>{children}</button>
}

import { type GetVariants } from "tailwindest"

const btn = tw.rotary({
    default: {},
    success: {},
    warning: {},
    base: {}, // [optional] base style
})

interface BtnProps {
    onClick: () => void
    children: ReactNode
    type?: GetVariants<typeof btn>
}

const Btn = ({ onClick, children, type = "default" }: BtnProps) => (
    <button className={btn.class(type)} onClick={onClick}>
        {children}
    </button>
)

const btn = tw.variants({
    variants: {
        type: {
            default: {},
            success: {},
            warning: {},
        },
        size: {
            sm: {},
            md: {},
            lg: {},
        },
        border: {
            true: {},
            false: {},
        },
    },
    base: {}, // [optional] base style
})

interface BtnProps extends GetVariants<typeof btn> {
    onClick: () => void
    children: ReactNode
}

const Btn = ({
    children,
    size = "md",
    type = "default",
    border = true,
    onClick,
}: BtnProps) => (
    <button className={btn.class({ size, type, border })} onClick={onClick}>
        {children}
    </button>
)

const text = tw.style({
    // text base style
})

interface TextProps {
    color?: Tailwindest["color"]
    fontWeight?: Tailwindest["fontWeight"]
}
export const UniversalText = ({
    children,
    ...textOptions
}: React.PropsWithChildren<TextProps>) => (
    <p
        className={tw.mergeProps(
            text.style,
            textOptions
            // override color and fontWeight
        )}
    >
        {children}
    </p>
)

const SomeComponent = () => (
    <>
        <UniversalText color="text-red-100" fontWeight="font-medium">
            color: red-100 & fontWeight: font-medium
        </UniversalText>

        <UniversalText color="text-blue-300" fontWeight="font-bold">
            color: blue-300 & fontWeight: font-bold
        </UniversalText>
    </>
)