import { useColor } from "@/hooks/useColor";
import { useTranslations } from "@/providers/TranslationProviders";
import React from "react";
import { Image, Text, View, useWindowDimensions } from "react-native";

import onbording1 from "@/assets/images/onbording-1.png";
import onbording2 from "@/assets/images/onbording-2.png";
import onbording3 from "@/assets/images/onbording-3.png";

type Props = {
  item: number;
  idx: number;
};

const slides = [
  {
    image: onbording1,
    title: (primary: string) => (
      <>
        Invest in <Text style={{ color: primary }}>Fractional</Text> Real Estate
      </>
    ),
    description:
      "Own shares of premium properties starting from just $100. Build a diversified real estate portfolio.",
  },
  {
    image: onbording2,
    title: (primary: string) => (
      <>
        Watch Your <Text style={{ color: primary }}>Returns</Text> Grow in Real
        Time
      </>
    ),
    description:
      "Monitor your investments with live dashboards. See earnings, growth charts, and projected returns.",
  },
  {
    image: onbording3,
    title: (primary: string) => (
      <>
        Trade on <Text style={{ color: primary }}>Secure </Text> Marketplace
      </>
    ),
    description:
      "Buy and sell property shares on our secondary market. Liquid, transparent, and always available.",
  },
];

const OnBoardingSliderItem = ({ item }: Props) => {
  const { tran } = useTranslations();
  const { primary } = useColor();
  const { width: SCREEN_WIDTH } = useWindowDimensions();

  const slide = slides[item - 1];

  return (
    <View
      className="pt-20 flex-1 pb-32 justify-between items-center"
      style={{ zIndex: 1 }}
    >
      <Image
        source={slide.image}
        className="w-full flex-1"
        resizeMode="contain"
      />
      <View
        style={{ width: SCREEN_WIDTH * 0.9, margin: SCREEN_WIDTH * 0.05 }}
        className="flex flex-col justify-center items-center"
      >
        <Text className="text-4xl text-center font-manrope-extrabold dark:text-white">
          {slide.title(primary.base)}
        </Text>
        <Text className="pt-5 text-slate-500 text-lg text-center px-6">
          {tran(slide.description)}
        </Text>
      </View>
    </View>
  );
};

export default OnBoardingSliderItem;
