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

const Base = styled('input')({
	height: '2.5rem',
	border: '0.125rem solid',
	borderRadius: '0.25rem',
	outline: 0,
	backgroundColor: 'var(--color-bg, white)',
	color: 'var(--color-fg, black)',
	font: 'inherit',
	padding: '0 1rem',
	cursor: 'pointer',
})

type Props = {
	name: string,
}

const TextInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
	return (
		<Base
			{...props}
			ref={ref}
		/>
	)
})

export default TextInput