"use client";

import React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Plus } from "lucide-react";

const medicos = [
  {
    id: 1,
    nome: "Dr. Carlos Andrade",
    especialidade: "Cardiologia",
    crm: "123456/SP",
  },
  {
    id: 2,
    nome: "Dra. Ana Souza",
    especialidade: "Pediatria",
    crm: "654321/RJ",
  },
];

export default function MedicosPage() {
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Médicos</h1>
          <p className="text-muted-foreground">Gerencie os médicos da sua clínica</p>
        </div>
        <Link href="/dashboard/medicos/novo">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Adicionar Médico
          </Button>
        </Link>
      </div>

      <div className="border rounded-lg">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Nome</TableHead>
              <TableHead>Especialidade</TableHead>
              <TableHead>CRM</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {medicos.map((medico) => (
              <TableRow key={medico.id}>
                <TableCell className="font-medium">{medico.nome}</TableCell>
                <TableCell>{medico.especialidade}</TableCell>
                <TableCell>{medico.crm}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}