import { ComponentPropsWithRef, forwardRef } from 'react';
import { cva, VariantProps } from 'class-variance-authority';

import './input.css';

type InputStylesProps = VariantProps<typeof inputStyles>;
const inputStyles = cva(['c-input'], {
  variants: {},
  defaultVariants: {},
});

type InputProps = InputStylesProps & ComponentPropsWithRef<'input'>;

export type InputRef = HTMLInputElement;

export const Input = forwardRef<InputRef, InputProps>(({ className, ...delegated }, ref) => {
  return <input ref={ref} className={inputStyles({ className })} type="text" {...delegated} />;
});

Input.displayName = 'Input';
