import { useTranslations } from "next-intl";

import {
  WhatReasonAnswer,
  WhatReasonsButtons,
} from "@/components/domains/retaining/what-reason";
import { Typography } from "@/components/ui";
import { ERetainingFunnel } from "@/types";

export default function WhatReason() {
  const t = useTranslations("WhatReason");

  const answers: WhatReasonAnswer[] = [
    {
      id: 1,
      title: t("answers.no_promised_result"),
      funnel: ERetainingFunnel.Red,
    },
    {
      id: 2,
      title: t("answers.too_expensive"),
      funnel: ERetainingFunnel.Red,
    },
    {
      id: 3,
      title: t("answers.high_auto_payment"),
      funnel: ERetainingFunnel.Red,
    },
    {
      id: 4,
      title: t("answers.unexpected_fee"),
      funnel: ERetainingFunnel.Red,
    },
    {
      id: 5,
      title: t("answers.want_pause"),
      funnel: ERetainingFunnel.Green,
    },
    {
      id: 6,
      title: t("answers.service_not_as_expected"),
      funnel: ERetainingFunnel.Red,
    },
    {
      id: 7,
      title: t("answers.found_alternative"),
      funnel: ERetainingFunnel.Red,
    },
    {
      id: 8,
      title: t("answers.dislike_app"),
      funnel: ERetainingFunnel.Purple,
    },
    {
      id: 9,
      title: t("answers.hard_to_navigate"),
      funnel: ERetainingFunnel.Purple,
    },
    {
      id: 10,
      title: t("answers.other"),
      funnel: ERetainingFunnel.Purple,
    },
  ];

  return (
    <>
      <Typography size="xl" weight="bold" as="h1">
        {t("title")}
      </Typography>
      <WhatReasonsButtons answers={answers} />
    </>
  );
}
