import { Check } 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 ApplyFilterButtonProps = {
    onClick: () => void;
    disabled: boolean;
}


const ApplyFilterButton = ({ onClick, disabled }: ApplyFilterButtonProps) => {

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

    if (isMobile) {
        return <MobileFab
            className="fixed right-safe-4 bottom-safe-4 z-20"
            icon={<Check />}
            textPosition="after"

            onClick={() => {
                if (disabled) return;

                onClick();
            }}
        />
    }


    return <Button

        onClick={() => {


            if (disabled) return;

            onClick();
        }}

        disabled={disabled}
        variant="default" ><Check /> {Lang.key('apply')}</Button>
}

export default ApplyFilterButton;