'use client'

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

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

interface Props {
  params: {
    id: string
  }
}

export default function EditStudentPage({ params }: Props) {
  const { id } = params
  const { setStudentSelected, clearStudentSelected } = useUserStore()

  useEffect(() => {
    setStudentSelected(id)

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

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

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

      <AppCard>
        <EditStudentForm />
      </AppCard>
    </div>
  )
}