import { ExternalLinkIcon } from "@heroicons/react/solid";

import { useLocale } from "@lib/hooks/useLocale";

import SettingsShell from "@components/SettingsShell";
import Shell from "@components/Shell";
import Button from "@components/ui/Button";

export default function Billing() {
  const { t } = useLocale();

  return (
    <Shell heading={t("billing")} subtitle={t("manage_your_billing_info")}>
      <SettingsShell>
        <div className="py-6 lg:pb-8 lg:col-span-9">
          <div className="bg-white border sm:rounded-sm">
            <div className="px-4 py-5 sm:p-6">
              <h3 className="text-lg leading-6 font-medium text-gray-900">
                {t("view_and_manage_billing_details")}
              </h3>
              <div className="mt-2 max-w-xl text-sm text-gray-500">
                <p>{t("view_and_edit_billing_details")}</p>
              </div>
              <div className="mt-5">
                <form
                  method="POST"
                  action={`${process.env.NEXT_PUBLIC_BASE_URL}/api/integrations/stripepayment/portal`}>
                  <Button type="submit">
                    {t("go_to_billing_portal")} <ExternalLinkIcon className="ml-1 w-4 h-4" />
                  </Button>
                </form>
              </div>
            </div>
          </div>
          <div className="mt-4 bg-gray-50 sm:rounded-sm border">
            <div className="px-4 py-5 sm:p-6">
              <h3 className="text-lg leading-6 font-medium text-gray-900">{t("need_anything_else")}</h3>
              <div className="mt-2 max-w-xl text-sm text-gray-500">
                <p>{t("further_billing_help")}</p>
              </div>
              <div className="mt-5">
                <Button href="mailto:help@cal.com" color="secondary" type="submit">
                  {t("contact_our_support_team")}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </SettingsShell>
    </Shell>
  );
}