import { Paper, Typography } from "@mui/material";
import styled from "styled-components";
import { ClientesListConfig } from "../components/organismos/ClientesDesign/ClientesListConfig";

export const Clientes = () => {
  return (
    <Container>
      <Paper
        sx={{
          mb: 2,
          p: 2,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Typography variant="h5" component="h1" sx={{ fontWeight: 600 }}>
          Clientes
        </Typography>
      </Paper>

      <Paper sx={{ p: 2 }}>
        <ClientesListConfig />
      </Paper>
    </Container>
  );
};

const Container = styled.div`
  min-height: calc(100vh - 80px);
  margin-top: 50px;
  padding: 15px;
`;

export default Clientes;