import type { Route } from './+types/certs'

import { Link } from 'react-router'

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@repo/ui/components/ui/breadcrumb'

import { Container } from '@/components/container'

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Certificados' }]
}

export default function Component() {
  return (
    <Container className="space-y-2.5">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link to="..">Meus cursos</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Certificados</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <div className="space-y-0.5">
        <h1 className="text-2xl font-bold tracking-tight">Certificados</h1>
        <p className="text-muted-foreground">
          Gerencie seus certificados com facilidade! Visualize suas conquistas e
          acompanhe seus cursos concluídos.
        </p>
      </div>
    </Container>
  )
}
