import { MobileListItem } from '@/components/ui/mobile';
import { cn } from '@/lib/utils';
import useAppConfigStore from '@/stores/appConfig';

type MenuItemProps = {
    label: any;
    media: any;
    subtitle?: string;
    hotkey?: string;
    active?: boolean;
    disabled?: boolean;
    after?: any;
    onClick?: () => void;
}
const MenuItem = (props: MenuItemProps) => {

    const { isMobile } = useAppConfigStore();

    if (isMobile) {
        return <MobileListItem
            title={props.label}
            link
            chevron={false}
            subtitle={!!props?.subtitle ? <span className='text-xs text-gray-500'>{props.subtitle}</span> : undefined}
            media={props.media}
            after={props.after}
            onClick={props.onClick}
        />
    }

    let className = 'flex items-center gap-2 p-2 rounded-md dark:hover:bg-gray-800 hover:bg-gray-100 cursor-pointer';
    if (props.active) {
        className += ' bg-gray-100 dark:bg-gray-800';
    }

    return <div onClick={props.disabled ? undefined : props.onClick}
        className={cn(className, props.disabled ? 'opacity-50 cursor-not-allowed' : '')}>
        <div className="shrink-0">
            {props.media}
        </div>
        <div className="min-w-0 flex-1">
            <div className="text-sm truncate">
                {props.label}
            </div>
            {!!props?.subtitle && <div className='text-xs text-gray-500'>{props.subtitle}</div>}
        </div>
        {(!!props.hotkey || props.after) && (
            <div className="ml-auto flex shrink-0 items-center gap-2">
                {!!props.hotkey && <span className='text-[10px] text-gray-500'>{props.hotkey}</span>}
                {props.after}
            </div>
        )}

    </div>
}

export default MenuItem;