import DemoContent from '@fuse/core/DemoContent';
import FusePageSimple from '@fuse/core/FusePageSimple';
import { useTranslation } from 'react-i18next';
import { styled } from '@mui/material/styles';
import ListDetalleProductoRender from './detalleProducto/DetalleProductoRender';
import ProductoRender from './ProductoRender';

const Root = styled(FusePageSimple)(({ theme }) => ({
	'& .FusePageSimple-header': {
		backgroundColor: theme.palette.background.paper,
		borderBottomWidth: 1,
		borderStyle: 'solid',
		borderColor: theme.palette.divider
	},
	'& .FusePageSimple-content': {},
	'& .FusePageSimple-sidebarHeader': {},
	'& .FusePageSimple-sidebarContent': {}
}));

function Producto() {
    const { t } = useTranslation('products');
    
	return(
		<Root
			header={
				<div className='p-24'>
					<h4>{t('PRODUCTOS')}</h4>
				</div>
			}
			content={
				<ProductoRender></ProductoRender>
			}
		/>
	)
}

export default Producto;