import React, { useState } from "react";
import { View, TextInput, StyleSheet, Platform, StyleProp, ViewStyle } from "react-native";
import { Ionicons } from "@expo/vector-icons";

interface SearchBarProps {
  onSearch?: (text: string) => void;
  style?: StyleProp<ViewStyle>;
}

export default function SearchBar({ onSearch, style }: SearchBarProps) {
  const [searchText, setSearchText] = useState("");

  const handleChangeText = (text: string) => {
    setSearchText(text);
    onSearch?.(text);
  };

  return (
    <View style={[styles.container, style]}>
      <Ionicons name="search" size={20} color="#9CA3AF" style={styles.icon} />
      <TextInput
        style={styles.input}
        placeholder="Tìm kiếm chuyến đi, tàu..."
        placeholderTextColor="#9CA3AF"
        value={searchText}
        onChangeText={handleChangeText}
      />
      {searchText.length > 0 && (
        <Ionicons
          name="close-circle"
          size={20}
          color="#9CA3AF"
          style={styles.clearIcon}
          onPress={() => handleChangeText("")}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#F9FAFB",
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderWidth: 1,
    borderColor: "#E5E7EB",
  },
  icon: {
    marginRight: 8,
  },
  input: {
    flex: 1,
    fontSize: 16,
    color: "#111827",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  clearIcon: {
    marginLeft: 8,
  },
});