Proyectos de Subversion LeadersLinked - SPA

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

import FormErrorFeedback from './FormErrorFeedBack'

const StyledInput = styled.div`
  align-items: center;
  background-color: rgb(238, 243, 240);
  border-radius: 20px;
  color: gray;
  cursor: pointer;
  display: flex;
  min-height: 1.5rem;
  padding: 0.5rem;
  gap: 5px;
  box-sizing: border-box;
  width: 100%;
  svg {
    font-size: 1rem;
  }
  input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
  }
`

const SearchInput = ({
  className = '',
  icon: Icon,
  errors = {},
  name = '',
  type = 'text',
  onChange = () => {},
  placeholder = '',
  ...props
}) => {
  return (
    <StyledInput className={className}>
      {Icon && <Icon />}
      <input
        type={type}
        name={name}
        onChange={onChange}
        placeholder={placeholder}
        {...props}
      />
      {errors[name] && (
        <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
      )}
    </StyledInput>
  )
}

export default SearchInput