import { FunnelX } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { MobileFab } from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';

type ClearFilterButtonProps = {
    onClick: () => void;
    disabled: boolean;
}

const ClearFilterButton = ({ onClick, disabled }: ClearFilterButtonProps) => {

    const isMobile = useAppConfigStore((state) => state.isMobile);

    if (isMobile) {
        return <MobileFab
            disabled={disabled}
            className="fixed left-safe-4 bottom-safe-4 z-20"
            onClick={() => {

                if (disabled) return;


                onClick();
            }}
            icon={<FunnelX />}

        />
    }
    return <Button
        disabled={disabled}

        variant="outline" onClick={() => {

            if (disabled) return;

            onClick();

        }}><FunnelX /> {Lang.key('clearFilter')}</Button>

}

export default ClearFilterButton;