import styled from 'styled-components';

const FieldTextStyled = styled.div`
  input {
    width: 602px;
    border: none;
    background: transparent;
    color: #d9d9d9;
    background-image: url('/images/search.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 28px;
    outline: none;
  }
  div {
    background: linear-gradient(174.61deg, #041833 1%, #04244f 96.76%)
        padding-box,
      linear-gradient(to right, #c98cf1, #7b78e5) border-box;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 10px;
  }
`;

const FiedlText = ({ placeholder, type }) => {
  return (
    <FieldTextStyled>
      <div>
        <input type={type} placeholder={placeholder} />
      </div>
    </FieldTextStyled>
  );
};

export default FiedlText;