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;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  min-height: 1.5rem;
  padding: 0.5rem;
  gap: 5px;
  box-sizing: border-box;
  width: ${(props) => props.width || '100%'};
  background-color: ${(props) =>
    props.primary ? 'var(--bg-color)' : 'var(--bg-color-secondary)'};
  svg {
    font-size: 1rem;
  }
  input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    &,
    &::placeholder {
      color: var(--font-color);
    }
  }
`

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

export default SearchInput