import {
  Box,
  Input,
  InputGroup,
  InputLeftElement,
  LinkBox,
  SimpleGrid,
} from "@chakra-ui/react"
import { FiSearch } from "react-icons/fi"
import useFocus from "../../../hooks/useFocus"
import Card from "../../Core/Card/Card"

const monitors = []

const MonitorSearchCard = () => {
  const [searchRef, onFocusToSearch] = useFocus()

  return (
    <Card>
      <Box pt={2} pb={5}>
        <InputGroup>
          <InputLeftElement pointerEvents="none">
            <FiSearch color="gray.300" />
          </InputLeftElement>
          <Input ref={searchRef} type="text" placeholder="Search monitor" />
        </InputGroup>
      </Box>
      <SimpleGrid columns={4} spacing={5}>
        {monitors.map((monitor, index) => (
          <Card key={index}>{monitor}</Card>
        ))}
        <LinkBox onClick={onFocusToSearch} cursor="pointer">
          <Card>More...</Card>
        </LinkBox>
      </SimpleGrid>
    </Card>
  )
}

export default MonitorSearchCard
