import {css} from 'styled-components';

type InTheme = {
  borderColor?: string,
  padding?: string,
  background?: string,
  height?: string,
}

type InputTheme = {
  theme: {
    input: InTheme,
  }
}

const Input = css(({theme}: InputTheme) => {
  const styles: InTheme = {};

  if (theme.input?.borderColor) {
    styles.borderColor = theme.input.borderColor;
  }

  if (theme.input?.padding) {
    styles.padding = theme.input.padding;
  }

  if (theme.input?.background) {
    styles.background = theme.input.background;
  }

  if (theme.input?.height) {
    styles.height = theme.input.height;
  }

  return styles;
});

export {Input};