import { Pressable, View } from 'react-native';

import { Icon } from '../../atoms/Icon';
import { cn } from '../../lib/cn';
import { Input } from '../../ui/input';

import type { SearchInputProps } from './SearchInput.types';

export function SearchInput({
  value,
  onClear,
  containerClassName,
  placeholder = 'Buscar...',
  ...props
}: SearchInputProps) {
  const showClear = Boolean(value) && Boolean(onClear);

  return (
    <View
      className={cn(
        'flex-row items-center gap-2 rounded-md border border-border bg-background px-3',
        containerClassName,
      )}
    >
      <Icon name="search" size={18} className="text-muted-foreground" />
      <Input
        value={value}
        placeholder={placeholder}
        accessibilityLabel={placeholder}
        className="flex-1 border-0 bg-transparent px-0 shadow-none"
        {...props}
      />
      {showClear ? (
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Limpiar búsqueda"
          onPress={onClear}
          hitSlop={8}
        >
          <Icon name="close" size={16} className="text-muted-foreground" />
        </Pressable>
      ) : null}
    </View>
  );
}