import styled from '@emotion/styled';

const Wrapper = styled.div`
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;

    &::placeholder {
      color: var(--color-background-fog-dense);
    }
  }
`;

const IconWrapper = styled.div``;

export default function IconInput({
  icon,
  ...otherProps
}: {
  icon: React.ReactNode;
} & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <Wrapper>
      <IconWrapper>{icon}</IconWrapper>
      <input {...otherProps} />
    </Wrapper>
  );
}