import { type ComponentPropsWithoutRef, forwardRef } from "react";

const sizeStyles = {
  sm: "h-8 rounded-lg px-2",
  md: "h-9 rounded-lg px-3",
  lg: "h-10 rounded-xl px-3",
  xl: "h-11 rounded-xl px-4",
} as const;

const variantStyles = {
  default: "bg-elevated text-heading focus:ring-accent/50",
  purple: "bg-surface text-foreground focus:ring-purple-600",
} as const;

interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
  size?: keyof typeof sizeStyles;
  variant?: keyof typeof variantStyles;
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ size = "md", variant = "default", className = "", ...rest }, ref) => (
    <input
      ref={ref}
      className={`w-full border-none text-sm outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 ${sizeStyles[size]} ${variantStyles[variant]} ${className}`}
      {...rest}
    />
  ),
);

Input.displayName = "Input";
export default Input;