import React from "react";
import { TouchableOpacity, Text, StyleSheet, Platform } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useI18n } from "@/hooks/use-i18n";

interface FilterButtonProps {
  onPress?: () => void;
  isFiltered?: boolean;
}

export default function FilterButton({
  onPress,
  isFiltered,
}: FilterButtonProps) {
  const { t } = useI18n();
  
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <Ionicons
        name="filter"
        size={20}
        color={isFiltered ? "#3B82F6" : "#374151"}
      />
      <Text style={[styles.text, isFiltered && { color: "#3B82F6" }]}>
        {t("diary.filter")}
      </Text>
      {isFiltered && (
        <Ionicons
          name="ellipse"
          size={10}
          color="#3B82F6"
          style={{ marginLeft: 4 }}
        />
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#FFFFFF",
    borderRadius: 12,
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderWidth: 1,
    borderColor: "#E5E7EB",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  text: {
    fontSize: 16,
    fontWeight: "500",
    color: "#374151",
    marginLeft: 8,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});
