Selectable table

import {
  Badge,
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  Separator,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cronus-ui/ui";
import { Laptop, LogOut, type LucideIcon, Monitor, Smartphone, Tablet } from "lucide-react";

interface UserSession {
  id: string;
  device: string;
  client: string;
  location: string;
  lastActive: string;
  icon: LucideIcon;
  current?: boolean;
  selected?: boolean;
}

const sessions: UserSession[] = [
  {
    id: "ses-01",
    device: "MacBook Pro 16″",
    client: "Chrome 126 · macOS Sonoma",
    location: "San Francisco, US",
    lastActive: "Active now",
    icon: Laptop,
    current: true,
  },
  {
    id: "ses-02",
    device: "iPhone 15 Pro",
    client: "Cronus iOS 2.4.1",
    location: "San Francisco, US",
    lastActive: "25 minutes ago",
    icon: Smartphone,
    selected: true,
  },
  {
    id: "ses-03",
    device: "Windows workstation",
    client: "Edge 126 · Windows 11",
    location: "Austin, US",
    lastActive: "Yesterday, 9:12 PM",
    icon: Monitor,
    selected: true,
  },
  {
    id: "ses-04",
    device: "iPad Air",
    client: "Safari 17 · iPadOS 17",
    location: "Lisbon, PT",
    lastActive: "Jun 24, 2026",
    icon: Tablet,
  },
];

export function SessionsTableBlock() {
  return (
    <Card className="mx-auto w-full max-w-3xl gap-0 pb-0 shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-lg">Sessions</CardTitle>
        <CardDescription>Review and revoke access across your devices.</CardDescription>
        <CardAction>
          <Button variant="outline" size="sm">
            <LogOut className="size-3.5" aria-hidden="true" />
            Revoke selected
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="px-0 pt-2">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-10 ps-4 sm:ps-6">
                <Checkbox aria-label="Select all sessions" />
              </TableHead>
              <TableHead>Device</TableHead>
              <TableHead className="hidden md:table-cell">Location</TableHead>
              <TableHead className="hidden sm:table-cell">Last active</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="pe-4 text-end sm:pe-6">
                <span className="sr-only">Actions</span>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {sessions.map((session) => {
              const Icon = session.icon;
              return (
                <TableRow key={session.id}>
                  <TableCell className="ps-4 sm:ps-6">
                    <Checkbox
                      defaultChecked={session.selected}
                      aria-label={`Select ${session.device}`}
                    />
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <span className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg bg-surface-inset text-fg-secondary">
                        <Icon className="size-4" aria-hidden="true" />
                      </span>
                      <div className="flex min-w-0 flex-col">
                        <span className="font-medium text-fg">{session.device}</span>
                        <span className="text-xs text-fg-tertiary">{session.client}</span>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell className="hidden text-fg-secondary md:table-cell">
                    {session.location}
                  </TableCell>
                  <TableCell className="hidden text-fg-secondary sm:table-cell">
                    {session.lastActive}
                  </TableCell>
                  <TableCell>
                    {session.current ? (
                      <Badge variant="success">This device</Badge>
                    ) : (
                      <Badge variant="secondary">Active</Badge>
                    )}
                  </TableCell>
                  <TableCell className="pe-4 text-end sm:pe-6">
                    {session.current ? null : (
                      <Button variant="ghost" size="sm" className="text-error-strong">
                        Revoke
                      </Button>
                    )}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </CardContent>
      <Separator />
      <CardFooter className="justify-between gap-3 py-5">
        <span className="text-xs text-fg-tertiary">4 sessions · 2 selected</span>
        <span className="text-xs text-fg-tertiary">Sessions expire after 30 days idle.</span>
      </CardFooter>
    </Card>
  );
}