'use client'

import type { ComponentRenderProps } from '@json-render/react'

export function SearchBar({ element }: ComponentRenderProps) {
  const { placeholder = 'Search...' } = element.props as { placeholder?: string; valuePath?: string }

  return (
    <div className="px-5 py-3 bg-gray-50 border-b border-gray-200">
      <input
        type="text"
        placeholder={placeholder}
        className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/10 transition-all"
      />
    </div>
  )
}
