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

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

export default function FilterButton({
  onPress,
  isFiltered,
}: FilterButtonProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();
  
  const themedStyles = {
    button: {
      backgroundColor: colors.card,
      borderColor: colors.border,
    },
    text: {
      color: isFiltered ? colors.primary : colors.textSecondary,
    },
  };

  return (
    <TouchableOpacity
      style={[styles.button, themedStyles.button]}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <Ionicons
        name="filter"
        size={20}
        color={isFiltered ? colors.primary : colors.textSecondary}
      />
      <Text style={[styles.text, themedStyles.text]}>
        {t("diary.filter")}
      </Text>
      {isFiltered && (
        <Ionicons
          name="ellipse"
          size={10}
          color={colors.primary}
          style={{ marginLeft: 4 }}
        />
      )}
    </TouchableOpacity>
  );
}

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