// Example About component with MUI styling
import React from "react";
import { 
  Box, 
  Typography, 
  CardMedia,
  useTheme
} from "@mui/material";

const About = () => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        p: 4,
        textAlign: "center"
      }}
    >
      <CardMedia
        component="img"
        image="/about-image.png"
        alt="About Us"
        sx={{
          width: 300,
          height: 200,
          objectFit: "cover",
          mb: 4,
          borderRadius: 1
        }}
      />

      <Typography variant="h4" component="h1" sx={{ mb: 2, color: theme.palette.primary.main }}>
        About Our Application
      </Typography>

      <Typography variant="body1" sx={{ maxWidth: 600, mb: 2 }}>
        This is a comprehensive dashboard application built with React and Material-UI.
      </Typography>

      <Typography variant="body1" sx={{ maxWidth: 600 }}>
        Create new projects for users with appropriate access levels. Contact your administrator
        if you need additional permissions.
      </Typography>
    </Box>
  );
};

export default About;