Member cards

import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
  CardAction,
  CardContent,
  CardFooter,
  CardHeader,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Input,
  Separator,
} from "@cronus-ui/ui";
import { MoreHorizontal, Search, UserPlus } from "lucide-react";

interface TeamMember {
  id: string;
  name: string;
  email: string;
  initials: string;
  role: string;
  roleVariant: "primary" | "info" | "secondary";
  status: "Active" | "Invited" | "Suspended";
  statusVariant: "success" | "warning" | "destructive";
  lastActive: string;
}

const smallTeam: TeamMember[] = [
  { id: "usr-11", name: "Priya Raman", email: "priya@lumastack.io", initials: "PR", role: "Owner", roleVariant: "primary", status: "Active", statusVariant: "success", lastActive: "Online now" },
  { id: "usr-12", name: "Diego Fuentes", email: "diego@lumastack.io", initials: "DF", role: "Admin", roleVariant: "info", status: "Active", statusVariant: "success", lastActive: "45 minutes ago" },
  { id: "usr-13", name: "Hana Yoshida", email: "hana@lumastack.io", initials: "HY", role: "Editor", roleVariant: "secondary", status: "Invited", statusVariant: "warning", lastActive: "Invite sent Jul 11" },
  { id: "usr-14", name: "Sam Whitfield", email: "sam@lumastack.io", initials: "SW", role: "Viewer", roleVariant: "secondary", status: "Active", statusVariant: "success", lastActive: "2 days ago" },
];

export function UserManagementCardsBlock() {
  return (
    <section aria-label="User management" className="mx-auto flex w-full max-w-5xl flex-col gap-4">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-col gap-1">
          <h2 className="font-display text-lg font-semibold text-fg">Team members</h2>
          <p className="text-sm text-fg-secondary">4 of 10 seats used on the Starter plan.</p>
        </div>
        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
          <div className="relative">
            <Search
              className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-fg-tertiary"
              aria-hidden="true"
            />
            <Input
              type="search"
              placeholder="Search members…"
              aria-label="Search members"
              className="ps-9 sm:w-56"
            />
          </div>
          <Button variant="primary" size="sm">
            <UserPlus className="size-4" aria-hidden="true" />
            Invite member
          </Button>
        </div>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {smallTeam.map((member) => (
          <Card key={member.id} className="gap-4 py-5 shadow-xs">
            <CardHeader>
              <div className="flex items-center gap-3">
                <Avatar className="size-10">
                  <AvatarFallback>{member.initials}</AvatarFallback>
                </Avatar>
                <div className="flex min-w-0 flex-col">
                  <span className="truncate text-sm font-medium text-fg">{member.name}</span>
                  <span className="truncate text-xs text-fg-tertiary">{member.email}</span>
                </div>
              </div>
              <CardAction>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon-sm">
                      <MoreHorizontal className="size-4" aria-hidden="true" />
                      <span className="sr-only">Actions for {member.name}</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem>View profile</DropdownMenuItem>
                    <DropdownMenuItem>Change role</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem className="text-error-strong">
                      Remove from team
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </CardAction>
            </CardHeader>
            <CardContent className="flex flex-wrap items-center gap-1.5">
              <Badge variant={member.roleVariant}>{member.role}</Badge>
              <Badge variant={member.statusVariant}>{member.status}</Badge>
            </CardContent>
            <Separator />
            <CardFooter className="justify-between">
              <span className="text-xs text-fg-tertiary">Last active</span>
              <span className="text-xs font-medium text-fg-secondary">{member.lastActive}</span>
            </CardFooter>
          </Card>
        ))}
      </div>
    </section>
  );
}