import { api } from '@/lib/api'
import { usePaged } from '@/lib/usePaged'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Card, CardContent } from '@/components/ui/card'
import { Pager } from '@/components/Pager'

export default function Pets() {
  const { page, setPage, data, totalPages } = usePaged<any>(api.pets)
  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">宠物管理</h1>
      <Card>
        <CardContent className="pt-6">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>宠物</TableHead>
                <TableHead>类型</TableHead>
                <TableHead>阶段</TableHead>
                <TableHead>体重</TableHead>
                <TableHead>主人ID</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data?.list?.map((p) => (
                <TableRow key={p.id}>
                  <TableCell>{p.id}</TableCell>
                  <TableCell className="font-medium">
                    <span className="mr-1">{p.emoji}</span>
                    {p.name}
                  </TableCell>
                  <TableCell>{p.type}</TableCell>
                  <TableCell>{p.stage}</TableCell>
                  <TableCell>{p.weight}</TableCell>
                  <TableCell>{p.user_id}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <Pager page={page} totalPages={totalPages} total={data?.total ?? 0} onChange={setPage} />
        </CardContent>
      </Card>
    </div>
  )
}