'use client';

import { useState } from 'react';
import { Box, TextField, Button, Typography, useMediaQuery, useTheme } from '@mui/material';
import { useMyNavigation } from '@/hooks/useMyNavigation';
import { styled } from '@mui/material/styles';

const links_list = [
    {
        title: "Passport qo'shish",
        path: '/add-passport',
    },
    {
        title: "Parolni o'zgartirish",
        path: '/edit-password',
    },
];

const StyledButton = styled(Button)(({ theme }) => ({
    padding: theme.spacing(2, 4),
    borderRadius: theme.spacing(1),
    fontSize: '1rem',
    fontWeight: 'bold',
    boxShadow: theme.shadows[2],
    transition: 'transform 0.3s ease, box-shadow 0.3s ease',
    backgroundColor: '#34495e',
    color: 'white',
    '&:hover': {
        backgroundColor: '#2c3e50',
    },
    [theme.breakpoints.down('sm')]: {
        // Kichik ekranlar uchun
        width: '100%',
        marginBottom: theme.spacing(2),
    },
}));

export default function Page() {
    const { push } = useMyNavigation();
    const theme = useTheme();
    const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
    const sidebarWidth = isDesktop ? 197 : 0;
    const maxWidth = 1152;
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

    const navigate_handler = (url: string) => {
        push('/profile/settings' + url);
    };

    return (
        <Box
            sx={{
                width: `calc(100% - ${sidebarWidth}px)`,
                maxWidth: `${maxWidth}px`,
                margin: '0 auto',
                padding: '20px',
                display: 'flex',
                flexDirection: isSmallScreen ? 'column' : 'row', // Kichik ekranda ustunli layout
                alignItems: 'center',
                justifyContent: 'center',
                gap: '20px',
            }}
        >
            <StyledButton onClick={() => navigate_handler('/add-passport')} variant='contained'>
                {"PASSPORT QO'SHISH"}
            </StyledButton>
            <StyledButton onClick={() => navigate_handler('/edit-password')} variant='contained'>
                {"PAROLNI O'ZGARTIRISH"}
            </StyledButton>
        </Box>
    );
}
