import React, { JSX, ReactNode } from 'react';

import { cn } from '@kit/ui/utils';

export type SearchProps = React.InputHTMLAttributes<HTMLInputElement> & {
  startElement?: string | JSX.Element;
  className?: string;
};

const Search = React.forwardRef<HTMLInputElement, SearchProps>(
  ({ className, startElement, ...props }, ref) => {
    return (
      <div
        className={cn(
          'border-input ring-offset-background focus-within:ring-ring flex h-10 items-center rounded-md border bg-white pl-3 text-sm focus-within:ring-1 focus-within:ring-offset-2',
          className,
        )}
      >
        {!!startElement && startElement}
        <input
          {...props}
          type="search"
          ref={ref}
          className="placeholder:text-muted-foreground w-full p-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
        />
      </div>
    );
  },
);

Search.displayName = 'Search';

export { Search };