import { GlobeIcon } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { MobileButton } from '@/components/ui/mobile';
import { changeLangDialogRef } from '@/componentsRoot/ChangeLangDialog';
import { Lang, useCanChangeLang } from '@/lang/Lang';
import useAppConfigStore, { useAppConfig } from '@/stores/appConfig';

const LoginLangButton = () => {

  const { isMobile } = useAppConfigStore();
  const { initLoaded } = useAppConfig();
  const canChangeLang = useCanChangeLang();

  if (!initLoaded || !canChangeLang) {
    return null;
  }

  if (isMobile) {
    return <MobileButton
      className="mt-6 w-full"
      outline
      onClick={() => changeLangDialogRef.current?.open()}
    >
      <GlobeIcon className='size-4 mr-2' />
      {Lang.key('change_language')}
    </MobileButton>
  }

  return (
    <Button
      variant="outline"
      className="mt-6 w-full"
      onClick={() => changeLangDialogRef.current?.open()}
    >
      <GlobeIcon />
      {Lang.key('change_language')}
    </Button>
  );
};

export default LoginLangButton;
