'use client'
import Link from 'next/link'
import { useEffect } from 'react'
import { FaArrowLeft } from 'react-icons/fa6'

import AppCard from '@/src/components/AppCard'
import EditPaymentForm from './components/EditPaymentForm'
import { useUserStore } from '@/src/store/userStore'

interface Props {
  params: {
    id: string
  }
}

export default function EditPaymentPage({ params }: Props) {
  const { id } = params
  const { setPaymentSelected, clearPaymentSelected } = useUserStore()

  useEffect(() => {
    setPaymentSelected(id)

    return () => {
      clearPaymentSelected()
    }
  }, [id])

  return (
    <div>
      <div className="mb-6 flex items-center space-x-4">
        <Link
          href="/payments"
          className="text-3xl p-2 rounded-full hover:bg-primary hover:text-neutral-04">
          <FaArrowLeft />
        </Link>

        <h2 className="text-3xl font-semibold">Modificar Pago</h2>
      </div>

      <AppCard>
        <EditPaymentForm />
      </AppCard>
    </div>
  )
}