'use client'

import React from 'react'
import SearchIcon from '../icons/SearchIcon'
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'

interface SearchboxProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'results'> {
  placeholder?: string
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export default function SearchBox({
  className,
  value,
  placeholder = '',
  onChange,
  ...props
}: SearchboxProps) {
  return (
    <div
      className={glassSurfaceFlat(
        'inline-flex rounded-xl px-4 h-10 w-full items-center content-center',
        className,
      )}
    >
      <SearchIcon stroke='#8C90A3' />
      <input
        onChange={onChange}
        value={value}
        placeholder={placeholder}
        className='text-[#8C90A3] pt-1 block outline-none border-none focus:ring-0 focus:outline-none px-[7px] h-full items-center w-full text-xs!'
        type='search'
        {...props}
      />
    </div>
  )
}