import { splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

export const Input = (props: JSX.InputHTMLAttributes<HTMLInputElement>) => {
  const [local, rest] = splitProps(props, ['class'])

  return (
    <input
      class={cn(
        'h-11 w-full rounded-xl bg-surface-lowest px-4 text-sm text-fg outline-none transition-all duration-200 placeholder:text-muted-fg focus:bg-surface-container focus:ring-2 focus:ring-primary/30',
        local.class,
      )}
      {...rest}
    />
  )
}
