'use client'

import { DashboardLayout } from '@/components/dashboard-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
import { BookOpen, Construction } from 'lucide-react'

export default function StudentClassesPage() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        {/* Breadcrumb */}
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/student/dashboard">Estudiante</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Mis Clases</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        {/* Header */}
        <div className="flex items-center gap-3">
          <div className="p-2 bg-primary/10 rounded-lg">
            <BookOpen className="h-6 w-6 text-primary" />
          </div>
          <div>
            <h1 className="text-2xl font-bold">Mis Clases</h1>
            <p className="text-muted-foreground">Gestión de tus clases y materias</p>
          </div>
        </div>

        {/* Contenido Pendiente */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Construction className="h-5 w-5 text-yellow-600" />
              Página en Desarrollo
            </CardTitle>
            <CardDescription>
              Esta funcionalidad está pendiente de implementar
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <div className="p-4 bg-yellow-100 rounded-full mb-4">
                <Construction className="h-12 w-12 text-yellow-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Pendiente de Hacer</h3>
              <p className="text-muted-foreground max-w-md">
                La página de &quot;Mis Clases&quot; está en desarrollo. Aquí podrás ver información detallada sobre tus materias, horarios de clase, y recursos académicos.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}