import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import InputBase from '@mui/material/InputBase';
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
import FuseSearch from '@fuse/core/FuseSearch';
import { Card } from '@mui/material';
import { color } from '@mui/system';

const Search = styled('div')(({ theme }) => ({
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: alpha(theme.palette.common.black, 0.06),
  '&:hover': {
    /* backgroundColor: alpha(theme.palette.common.white, 0.25), */
  },
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    /* marginLeft: theme.spacing(), */
    width: 'auto',
  },
}));

const SearchIconWrapper = styled('div')(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: '100%',
  position: 'absolute',
  pointerEvents: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: 'inherit',
  width: '100%',
  '& .MuiInputBase-input': {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
  },
}));

function BuscarProducto() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <div
      className='bg-white'>
      <Typography className="text-lg font-medium tracking-tight leading-6 truncate"
      paddingTop={1}
      paddingLeft={3}
      >
            {("Buscar producto")}
      </Typography>
        <Toolbar>
          <Search>
            <SearchIconWrapper>
            <FuseSvgIcon
                className="text-48 text-black"
                size={24}
                color="action"
              >
                heroicons-outline:search
              </FuseSvgIcon>
            </SearchIconWrapper>
            <StyledInputBase
              placeholder="Buscar Producto"
              inputProps={{ 'aria-label': 'search' }}
            />
          </Search>
        </Toolbar>
      </div>
    </Box>
  );
}

export default BuscarProducto;