import { AtSign } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    MobileBlock,
    MobileButton,
} from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';

const ChangeEmailInput = ({
    email,
    setEmail,
    onEmailSubmit,
    loading,
}: {
    email: string;
    setEmail: (email: string) => void;
    onEmailSubmit: () => void;
    loading: boolean;
}) => {
    const { isMobile } = useAppConfigStore();

    if (isMobile) {
        return (
            <MobileBlock>
                <Input
                    id="change-email"
                    name="email"
                    type="email"
                    autoComplete="email"
                    icon={<AtSign />}
                    className="my-8"
                    placeholder={Lang.key('add_email')}
                    value={email}
                    onChange={(e) => setEmail(e.target.value.trim())}
                    onKeyPress={(event) => {
                        if (event.key === 'Enter') {
                            onEmailSubmit();
                        }
                    }}
                />
                <MobileButton
                    className="mt-2"
                    disabled={!email || loading}
                    onClick={onEmailSubmit}
                >
                    {Lang.key('continue')}
                </MobileButton>
            </MobileBlock>
        );
    }

    return (
        <div>
            <Input
                id="change-email"
                name="email"
                type="email"
                autoComplete="email"
                icon={<AtSign />}
                placeholder={Lang.key('add_email')}
                value={email}
                onChange={(e) => setEmail(e.target.value.trim())}
                onKeyPress={(event) => {
                    if (event.key === 'Enter') {
                        onEmailSubmit();
                    }
                }}
            />
            <Button
                disabled={!email || loading}
                onClick={onEmailSubmit}
                className="mt-2 w-full"
            >
                {Lang.key('continue')}
            </Button>
        </div>
    );
};

export default ChangeEmailInput;
