"use client"
import { useIntl } from "react-intl"

import { profile } from "@/constants/routes/myPages"
import { useProfileStore } from "@/stores/edit-profile"

import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"

import type { LangParams, PageArgs } from "@/types/params"

export default function EditProfile({ params }: PageArgs<LangParams>) {
  const { formatMessage } = useIntl()
  const isPending = useProfileStore((store) => store.pending)
  const isValid = useProfileStore((store) => store.valid)

  const cancel = formatMessage({ id: "Cancel" })
  const save = formatMessage({ id: "Save" })
  return (
    <>
      <Button
        aria-label={cancel}
        asChild
        form="edit-profile"
        size="small"
        type="reset"
      >
        <Link href={profile[params.lang]}>{cancel}</Link>
      </Button>
      <Button
        aria-label={save}
        disabled={!isValid || isPending}
        form="edit-profile"
        size="small"
        type="submit"
      >
        {save}
      </Button>
    </>
  )
}
