import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import { Box, Typography } from '@mui/material';

const Test = () => { // لاحظ الحرف الكبير في بداية الاسم
  const navigate = useNavigate(); // صحيح الآن لأنها داخل مكون React
  const theme = useTheme(); // تعريف theme باستخدام useTheme

  const handleClick = () => {
    navigate('/dashboard');
  };

  return (
    <Box sx={{ 
      backgroundColor: theme.palette.background.default,
      p: 2
    }}>
      <Typography 
        variant="h6"
        sx={{ 
          color: theme.palette.text.primary,
          mb: 2,
          fontWeight:900,
          fontSize:'50px'
        }}
      >
        Test Component
      </Typography>
      <button onClick={handleClick}>
        Navigate
      </button>
    </Box>
  );
};

export default Test;