Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Box, styled } from '@mui/material'

import FormErrorFeedback from './form/FormErrorFeedback'

const StyledInput = styled(Box)`
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  min-height: 1.5rem;
  padding: 0.5rem;
  gap: 5px;
  box-sizing: border-box;
  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 = ({
  name = '',
  type = 'text',
  placeholder = '',
  onChange = () => {},
  icon: Icon,
  error = '',
  primary = true,
  value,
  ...props
}) => {
  return (
    <StyledInput primary={primary} {...props}>
      {Icon && <Icon />}
      <input
        type={type}
        name={name}
        onChange={onChange}
        placeholder={placeholder}
        value={value}
      />
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
    </StyledInput>
  )
}

export default SearchInput