'use client';

import { glassSurface } from '@/lib/styles/glassSurface';
import React from 'react';

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

function CategorySmallItemRenderer({ children, compact = false, className, ...rest }: Props) {
    return (
        <div className={glassSurface(className, 'cursor-pointer transition-[background-color,box-shadow,opacity] duration-200 ease-out rounded-xl outline-none [-webkit-tap-highlight-color:transparent]')}>
            <div
                {...rest}
                className={
                    compact
                        ? "rounded-normal flex flex-row justify-center items-center h-8 px-2 gap-2"
                        : "rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
                }
            >
                {children}
            </div>
        </div>
    );
}

export default CategorySmallItemRenderer;
