import { forwardRef } from 'react'

interface InputProps extends React.HTMLProps<HTMLInputElement> {
  label: string
}

export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  const { label, name, ...rest } = props

  return (
    <>
      <div className='form-group-animation'>
        <input ref={ref} {...rest} id={name} name={name} />
        <label htmlFor={name} className='label'>
          <span className='label-content'>{label}</span>
        </label>
      </div>

      <style jsx>{`
        .form-group-animation {
          position: relative;
          margin-top: 10px;
          margin-bottom: 30px;
          overflow: hidden;
        }
        .form-group-animation input {
          width: 100%;
          height: 100%;
          padding-top: 35px;
          color: var(--color-text-1);
          border: none;
          background: transparent;
          outline: none;
        }
        .form-group-animation label {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          border-bottom: 1px solid #fff;
        }
        .form-group-animation label::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -1px;
          height: 100%;
          width: 100%;
          border-bottom: 3px solid var(--color-primary);
          transform: translateX(-100%);
          transition: transform 0.2s ease;
        }
        .label-content {
          position: absolute;
          bottom: 5px;
          left: 0px;
          transition: all 0.3s ease;
        }
        .form-group-animation input:focus + .label .label-content,
        .form-group-animation input:valid + .label .label-content {
          transform: translateY(-150%);
          font-size: 14px;
          color: var(--color-primary);
        }
        .form-group-animation input:focus + .label::after,
        .form-group-animation input:valid + .label::after {
          transform: translateX(0%);
        }
      `}
      </style>
    </>
  )
})