Proyectos de Subversion LeadersLinked - SPA

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

import FormErrorFeedback from './FormErrorFeedback'

const StyledSelectField = styled.div`
  align-items: center;
  background-color: #eef3f0;
  border-radius: var(--border-radius);
  color: gray;
  cursor: pointer;
  display: flex;
  min-height: 1.5rem;
  padding: 0.5rem;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  select {
    border: none;
    outline: none;
    background-color: #eef3f0;
    width: 100%;
  }
`

const SelectField = ({
  className = '',
  name = '',
  label = '',
  options = [],
  ref = null,
  errors = {},
  onChange = () => {},
  value = '',
}) => (
  <StyledSelectField className={className}>
    <select
      defaultValue={value}
      name={name}
      id={name}
      ref={ref}
      onChange={onChange}
    >
      <option value="">{label}</option>
      {options.map(({ name, value }) => (
        <option value={value} key={value}>
          {name}
        </option>
      ))}
    </select>
    {errors[name] && (
      <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
    )}
  </StyledSelectField>
)

export default SelectField