"use client"
import { profile } from "@/constants/routes/myPages"
import { _ } from "@/lib/translation"
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 isPending = useProfileStore((store) => store.pending)
  const isValid = useProfileStore((store) => store.valid)
  return (
    <>
      <Button
        aria-label="Cancel"
        asChild
        form="edit-profile"
        size="small"
        type="reset"
      >
        <Link href={profile[params.lang]}>{_("Cancel")}</Link>
      </Button>
      <Button
        disabled={!isValid || isPending}
        form="edit-profile"
        size="small"
        type="submit"
      >
        {_("Save")}
      </Button>
    </>
  )
}