'use client'

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

import AppCard from '@/src/components/AppCard'
import ModifyUserForm from './components/ModifyUserForm'
import { useUserStore } from '@/src/store/userStore'
import { useEffect } from 'react'

interface Props {
  params: {
    id: string
  }
}

export default function ModifyStudentPage({ params }: Props) {
  const { id } = params
  const { setUserSelected, clearUserSelected } = useUserStore()

  useEffect(() => {
    setUserSelected(id)

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

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

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

      <AppCard>
        <div>
          <ModifyUserForm />
        </div>
      </AppCard>
    </div>
  )
}