'use client';

import { Button } from '@mui/material';
import React from 'react';
import { useMyNavigation } from '@/hooks/useMyNavigation';

interface IProps {
    openVerifyPhoneModal: () => void;
}

export default function ILoginBtn({ openVerifyPhoneModal }: IProps) {
    const token = typeof window !== "undefined" ? localStorage.getItem('token') : "";
    const { replace } = useMyNavigation();

    const handleProfile = () => {
        if (token) {
            replace('/profile');
        } else {
            openVerifyPhoneModal();
        }
    };

    return (
        <Button
            onClick={handleProfile}
            sx={{
                backgroundColor: 'transparent',
                padding: 0,
                textTransform: 'capitalize',
                display: 'flex',
                alignItems: 'center',
                gap: 0.5,
            }}
        >
            <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
                <path
                    d='M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7Z'
                    fill='#fff'
                />
                <path d='M14 12C14 10.3431 12.6569 9 11 9H5C3.34315 9 2 10.3431 2 12V15H14V12Z' fill='#fff' />
            </svg>
            <span>{token ? 'Profil' : 'Kirish'}</span>
        </Button>
    );
}
