bunu incele ve ilgili yapıyı kullanarak daha güzel ve performanslı hale getir

import { City, Score } from "@/api/cities";
import { Pressable, StyleProp, View, ViewStyle } from "react-native";
import { atoms as a, useTheme } from "@/alf";
import { HighPriorityImage } from "@/components/util/images/HighPriorityImage";
import { PaletteText } from "@/components/ui/PaletteText";
import React from "react";
import CityCardProgress from "@/Scenes/City/comp/CityCardProgress";
import { translate } from "@/core";
import { Button, ButtonText } from "@/components/ui/Button";

import Animated, {
  useSharedValue,
  withSpring,
  withTiming,
  FadeIn,
  useAnimatedStyle,
} from "react-native-reanimated";
import { useCityCardContext } from "@/Scenes/City/comp/CityCardContex";
import { notFoundCountryImage } from "@/lib/utils";
import { ChevronBottom_Stroke2_Corner0_Rounded } from "@/components/icons/Chevron";
import {ChevronTop_Stroke2_Corner0_Rounded} from "@/components/icons/Chevron";

type Props = {
  item: City;
  scores?: Score[];
  onPress: () => void;
  outerStyle?: StyleProp<ViewStyle>;
};

export function ExploreCityCard({ item, scores, onPress, outerStyle }: Props) {
  const t = useTheme();
  const { pressedCard, setPressedCard } = useCityCardContext();

  const animatedValue = useSharedValue(0);
  const isPressed = pressedCard === item.slug;

  const handlePress = () => {
    onPress();
  };

  const handleOutsidePress = () => {
    if (isPressed) {
      setPressedCard(null);
      animatedValue.value = withTiming(0, { duration: 300 });
    }
  };

  const togglePressed = () => {
    if (isPressed) {
      setPressedCard(null);
      animatedValue.value = withTiming(0, { duration: 300 });
    } else {
      setPressedCard(item.slug);
      animatedValue.value = withSpring(1, { damping: 12, stiffness: 100 });
    }
  };

  const chevronStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotate: `${animatedValue.value * 180}deg`,
        },
      ],
    };
  });

  return (
    <Animated.View
      style={[a.border_b, t.atoms.border_contrast_low, outerStyle]}
    >
      <Pressable
        style={[a.flex_1, a.gap_md, a.px_lg, a.py_lg]}
        onPress={handlePress}
      >
        <View style={[a.flex_row, a.align_center, a.gap_md]}>
          <View
            style={[
              a.rounded_full,
              a.border,
              t.atoms.bg_contrast_25,
              t.atoms.border_contrast_low,
            ]}
          >
            <HighPriorityImage
              source={{ uri: item?.country?.flag_svg || notFoundCountryImage }}
              style={[a.rounded_full, { width: 36, height: 36 }]}
              contentFit="cover"
            />
          </View>

          <View style={[a.flex_1]}>
            <PaletteText
              type="lg"
              style={[a.font_bold, t.atoms.text]}
              numberOfLines={1}
            >
              {item?.name}
            </PaletteText>
            <View style={[a.flex_row, a.gap_sm, a.align_center]}>
              {item?.country?.name && (
                <PaletteText
                  style={[t.atoms.text_contrast_medium]}
                  numberOfLines={1}
                >
                  {item.country.name}
                </PaletteText>
              )}
            </View>
          </View>
          <Button
            variant="solid"
            label="close"
            size="small"
            shape="round"
            color="secondary"
            style={[a.justify_center]}
            onPress={togglePressed}
          >
            <Animated.View style={chevronStyle}>
              <ChevronBottom_Stroke2_Corner0_Rounded
                size="md"
                fill={t.atoms.text_contrast_medium.color}
              />
            </Animated.View>
          </Button>
        </View>

        {isPressed && (
          <Animated.View style={[a.gap_md]} entering={FadeIn}>
            {item?.total_score ? (
              <CityCardProgress
                value={item?.total_score || 0}
                label={translate("score")}
                maxValue={5}
                textColor={t.atoms.text_contrast_medium.color}
              />
            ) : null}
            {scores?.map((score, index) => (
              <CityCardProgress
                key={index}
                value={score?.value || 0}
                label={score?.name || ""}
                maxValue={5}
                textColor={t.atoms.text_contrast_medium.color}
              />
            ))}
            <Button
              label={translate("open")}
              variant="solid"
              color="secondary"
              size="medium"
              onPress={handlePress}
            >
              <ButtonText>{translate("open")}</ButtonText>
            </Button>
          </Animated.View>
        )}
      </Pressable>
    </Animated.View>
  );
}