'use client';

import React from 'react';

type Props = {
    children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>;

function CategorySmallItemRenderer({ children, ...rest }: Props) {
    return (
        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
            <div
                {...rest}
                className="rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
            >
                {children}
            </div>
        </div>
    );
}

export default CategorySmallItemRenderer;
