import React from 'react';
import { IonIcon } from '@ionic/react';
import { searchOutline, optionsOutline } from 'ionicons/icons';

interface ListSearchRowProps {
  value: string;
  onChange: (val: string) => void;
  placeholder?: string;
  onFilterClick?: () => void;
  showFilter?: boolean;
}

const ListSearchRow: React.FC<ListSearchRowProps> = ({
  value,
  onChange,
  placeholder = 'Search...',
  onFilterClick,
  showFilter = false,
}) => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        margin: '0 20px 12px',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          flex: 1,
          backgroundColor: '#ffffff',
          borderRadius: '16px',
          padding: '0 16px',
          height: '48px',
        }}
      >
        <IonIcon
          icon={searchOutline}
          style={{ fontSize: '20px', color: '#9ca3af', flexShrink: 0 }}
        />
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          style={{
            flex: 1,
            border: 'none',
            outline: 'none',
            backgroundColor: 'transparent',
            padding: '0 12px',
            fontSize: '15px',
            color: '#111827',
          }}
        />
      </div>
      {showFilter && (
        <button
          onClick={onFilterClick}
          style={{
            width: '48px',
            height: '48px',
            borderRadius: '16px',
            backgroundColor: '#ffffff',
            border: 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
            cursor: 'pointer',
          }}
        >
          <IonIcon
            icon={optionsOutline}
            style={{ fontSize: '20px', color: '#6d28d9' }}
          />
        </button>
      )}
    </div>
  );
};

export default ListSearchRow;