import {
  CampaignFeatures,
  SvgFeaturesMobileAso,
  SvgFeaturesMobileAuthntication,
  SvgFeaturesMobileBiometric,
  SvgFeaturesMobileDashboard,
  SvgFeaturesMobileMaps,
  SvgFeaturesMobileNotification,
  SvgFeaturesMobileVersions,
  SvgFeaturesWebAnalytics,
  SvgFeaturesWebChat,
  SvgFeaturesWebCloude,
  SvgFeaturesWebDashboard,
  SvgFeaturesWebHost,
  SvgFeaturesWebOrder,
  SvgFeaturesWebSeo,
  SvgFeaturesWebSupport,
} from "#components";

export const useFeaturesData = () => {
  const { t } = useI18n();

  const features = computed(() => {
    return {
      title: t("features.title"),
      tap1: t("features.tap1"),
      tap2: t("features.tap2"),
      description: t("features.description"),
      webFeatures: [
        {
          id: 1,
          icon: SvgFeaturesWebDashboard,
          content: t("features.webFeatures.0"),
        },
        {
          id: 2,
          icon: SvgFeaturesWebCloude,
          content: t("features.webFeatures.1"),
        },
        {
          id: 3,
          icon: SvgFeaturesWebOrder,
          content: t("features.webFeatures.2"),
        },
        {
          id: 4,
          icon: SvgFeaturesWebAnalytics,
          content: t("features.webFeatures.3"),
        },
        {
          id: 5,
          icon: SvgFeaturesWebChat,
          content: t("features.webFeatures.4"),
        },
        {
          id: 6,
          icon: SvgFeaturesWebSeo,
          content: t("features.webFeatures.5"),
        },
        {
          id: 7,
          icon: SvgFeaturesWebHost,
          content: t("features.webFeatures.6"),
        },
        {
          id: 8,
          icon: SvgFeaturesWebSupport,
          content: t("features.webFeatures.7"),
        },
      ],
      mobileFeatures: [
        {
          id: 1,
          icon: SvgFeaturesMobileDashboard,
          content: t("features.mobileFeatures.0"),
        },
        {
          id: 2,
          icon: SvgFeaturesMobileNotification,
          content: t("features.mobileFeatures.1"),
        },
        {
          id: 3,
          icon: SvgFeaturesMobileVersions,
          content: t("features.mobileFeatures.2"),
        },
        {
          id: 4,
          icon: SvgFeaturesWebAnalytics,
          content: t("features.mobileFeatures.3"),
        },
        {
          id: 5,
          icon: SvgFeaturesMobileMaps,
          content: t("features.mobileFeatures.4"),
        },
        {
          id: 6,
          icon: SvgFeaturesMobileAso,
          content: t("features.mobileFeatures.5"),
        },
        {
          id: 7,
          icon: SvgFeaturesMobileAuthntication,
          content: t("features.mobileFeatures.6"),
        },
        {
          id: 8,
          icon: SvgFeaturesMobileBiometric,
          content: t("features.mobileFeatures.7"),
        },
      ],
    };
  });

  const tabsData = computed(() => [
    {
      value: "web-features",
      title: t("features.tap1"),
      component: CampaignFeatures,
      props: {
        featureData: features.value.webFeatures,
      },
    },
    {
      value: "mobile-features",
      title: t("features.tap2"),
      component: CampaignFeatures,
      props: {
        featureData: features.value.mobileFeatures,
      },
    },
  ]);

  return {
    features,
    tabsData,
  };
};
