'use client'

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

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

interface Props {
  params: {
    id: string
  }
}

export default function StudentsGradeReportPage({ params }: Props) {
  const { id } = params
  const { setStudentSelected } = useUserStore()

  useEffect(() => {
    setStudentSelected(id)
  }, [id, setStudentSelected])

  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">Reportes de Notas</h2>
      </div>

      <AppCard>
        <div className="flex justify-between items-center mb-6">
          <div>
            <h3 className="text-xl font-semibold mb-3">
              Lista de Reporte de Notas
            </h3>
            <p className="text-gray-600">
              Reporte de notas del estudiante por cada ciclo académico cursado.
            </p>
          </div>
        </div>
        <div className="overflow-x-auto">
          <GradesReportsTable studentId={id} />
        </div>
      </AppCard>
    </div>
  )
}