Device list

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

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

const deviceSessions: DeviceSession[] = [
  {
    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,
  },
  {
    id: "ses-03",
    device: "Windows workstation",
    client: "Edge 126 · Windows 11",
    location: "Austin, US",
    lastActive: "Yesterday, 9:12 PM",
    icon: Monitor,
  },
  {
    id: "ses-04",
    device: "iPad Air",
    client: "Safari 17 · iPadOS 17",
    location: "Lisbon, PT",
    lastActive: "Jun 24, 2026",
    icon: Tablet,
  },
];

export function SessionsListBlock() {
  return (
    <Card className="mx-auto w-full max-w-2xl gap-0 pb-0 shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-lg">Active sessions</CardTitle>
        <CardDescription>Devices currently signed in to your account.</CardDescription>
        <CardAction>
          <Badge variant="secondary">4 devices</Badge>
        </CardAction>
      </CardHeader>
      <CardContent className="px-0 pt-4">
        <ul className="flex flex-col">
          {deviceSessions.map((session) => {
            const Icon = session.icon;
            return (
              <li
                key={session.id}
                className="flex flex-wrap items-center gap-4 border-t border-border px-4 py-4 sm:px-6"
              >
                <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-inset text-fg-secondary">
                  <Icon className="size-5" aria-hidden="true" />
                </span>
                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="font-medium text-fg">{session.device}</span>
                    {session.current ? <Badge variant="success">This device</Badge> : null}
                  </div>
                  <span className="text-sm text-fg-secondary">{session.client}</span>
                  <span className="text-xs text-fg-tertiary">
                    {session.location} · {session.lastActive}
                  </span>
                </div>
                {session.current ? null : (
                  <Button variant="ghost" size="sm" className="text-error-strong">
                    Revoke
                  </Button>
                )}
              </li>
            );
          })}
        </ul>
      </CardContent>
      <Separator />
      <CardFooter className="justify-between gap-3 py-5">
        <span className="text-xs text-fg-tertiary">
          Revoking a session signs that device out immediately.
        </span>
        <Button variant="outline" size="sm">
          <LogOut className="size-3.5" aria-hidden="true" />
          Sign out all other sessions
        </Button>
      </CardFooter>
    </Card>
  );
}