import React from 'react'
import styled from 'styled-components'

export type SearchInputProps = {
  id?: string;
  label?: string;
  value?: string
  placeholder?: string
  handleChange?: () => void
  css?: string
  icon?: React.ReactNode
};

export const SearchInput = React.forwardRef((props:SearchInputProps,ref:any):JSX.Element => {
  const { id,value,label, placeholder, handleChange, css,icon } = props
  return (
    <Container id={id} ref={ref}>
      <IconContainer>{icon}</IconContainer>
      <StyledSearchInput label={label} value={value} placeholder={placeholder} onChange={handleChange} css={css} />
    </Container>  
  )
})

SearchInput.displayName = 'SearchInput'

const Container = styled.div`
  position: relative;
`

const IconContainer = styled.div`
  height: 1.5rem;
  width: 1.5rem;
  padding: 4px;
  position: absolute;
  box-sizing:border-box;
  top:50%;
  left:2px;
  transform: translateY(-50%);
`

const StyledSearchInput = styled.input<SearchInputProps>`
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  height: auto;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.55;
  appearance: none;
  box-sizing: border-box;
    font-size: 1rem;
  width: 100%;
  color: #000;
  display: block;
  text-align: left;
  min-height: 36px;
  padding: 10px 12px 10px 2rem;
  border-radius: 4px;
  border: 1px solid #ced4da;
  background-color: #fff;
  transition: all 100ms ease 0s;

  &:focus {
    outline:none;
    border-color: #228be6;
  }
    ${(p) => p.css}
  `