import { Images } from '@/constants/images';
import { Image } from 'expo-image';
import React, { useState } from 'react';
import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';

interface SearchBarProps {
  onSearch?: (keyword: string) => void;
}

export function SearchBar({ onSearch }: SearchBarProps) {
  const [keyword, setKeyword] = useState('');

  const handleSearch = () => {
    onSearch?.(keyword);
  };

  return (
    <View style={styles.container}>
      {/* Logo - 134rpx = 67pt, 50rpx = 25pt */}
      <View style={styles.logo}>
        <Image source={Images.home.portrait} style={styles.logoImage} contentFit="contain" />
      </View>
      {/* 搜索框 - 328rpx = 164pt, 56rpx = 28pt */}
      <View style={styles.searchBox}>
        <TouchableOpacity onPress={handleSearch}>
          <Image source={Images.home.search} style={styles.searchIcon} contentFit="contain" />
        </TouchableOpacity>
        <TextInput
          style={styles.input}
          placeholder="搜索"
          placeholderTextColor="#C4C3C3"
          value={keyword}
          onChangeText={setKeyword}
          onSubmitEditing={handleSearch}
          returnKeyType="search"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  logo: {
    width: 67,
    height: 25,
    marginRight: 20,
  },
  logoImage: {
    width: '100%',
    height: '100%',
  },
  searchBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.38)',
    borderRadius: 180,
    paddingHorizontal: 12,
    height: 28,
    width: 164,
  },
  searchIcon: {
    width: 15,
    height: 15,
    marginRight: 5,
  },
  input: {
    width: 100,
    color: '#fff',
    fontSize: 12,
    padding: 0,
  },
});