import React, { FC } from "react";
import { Text, View } from "react-native";
import LottieView from "lottie-react-native";
import { useThemeColors } from "@/lib/theme";
import { useResponsive } from "@/lib/responsive";

type StationListLoadingStateProps = {
  width: number;
  message: string;
};

export const StationListLoadingState: FC<StationListLoadingStateProps> = ({
  width,
  message,
}) => {
  const { colors, fixed } = useThemeColors();
  const { fontScale } = useResponsive();

  return (
    <View
      style={{
        width: width * 0.8,
        height: ((width * 0.8) / 20) * 9,
        borderColor: fixed.primary,
        borderWidth: 1,
        backgroundColor: colors.background,
      }}
    >
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <LottieView
          autoPlay
          loop
          style={{ width: 56, height: 56 }}
          source={require("@/assets/51690-loading-diamonds.json")}
        />
        <Text
          style={{
            marginTop: 8,
            color: colors.textSecondary,
            fontSize: fontScale(14),
            textAlign: "center",
          }}
        >
          {message}
        </Text>
      </View>
    </View>
  );
};