Team Members

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Badge,
  Button,
  Card,
  CardHeader,
  CardTitle,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Separator,
} from "@cooud-ui/ui";
import { MoreHorizontal, UserMinus, Users } from "lucide-react";

interface Member {
  id: string;
  name: string;
  email: string;
  role: string;
  roleVariant: "primary" | "info" | "secondary";
  avatar?: string;
  initials: string;
}

const members: Member[] = [
  {
    id: "m1",
    name: "Mara Castillo",
    email: "mara@cooud.io",
    role: "Owner",
    roleVariant: "primary",
    avatar: "https://i.pravatar.cc/96?img=12",
    initials: "MC",
  },
  {
    id: "m2",
    name: "Devon Lane",
    email: "devon@cooud.io",
    role: "Admin",
    roleVariant: "info",
    avatar: "https://i.pravatar.cc/96?img=33",
    initials: "DL",
  },
  {
    id: "m3",
    name: "Priya Sharma",
    email: "priya@cooud.io",
    role: "Member",
    roleVariant: "secondary",
    initials: "PS",
  },
  {
    id: "m4",
    name: "Tobias Funke",
    email: "tobias@cooud.io",
    role: "Member",
    roleVariant: "secondary",
    avatar: "https://i.pravatar.cc/96?img=68",
    initials: "TF",
  },
  {
    id: "m5",
    name: "Aiko Tanaka",
    email: "aiko@cooud.io",
    role: "Member",
    roleVariant: "secondary",
    initials: "AT",
  },
];

export function TeamBlock() {
  return (
    <Card className="mx-auto w-full max-w-xl gap-0 py-0 shadow-md">
      <CardHeader className="items-center px-6 py-5">
        <div className="flex flex-col gap-1">
          <CardTitle className="font-display text-lg">Team members</CardTitle>
          <p className="text-sm text-fg-secondary">Invite and manage your workspace teammates.</p>
        </div>
        <Button variant="gradient" size="sm" className="col-start-2 row-span-2 self-center">
          <Users className="size-4" aria-hidden="true" />
          Invite
        </Button>
      </CardHeader>

      <Separator />

      <ul className="flex flex-col">
        {members.map((member, i) => (
          <li
            key={member.id}
            className={`flex items-center gap-4 px-6 py-4 transition-colors hover:bg-surface-overlay/60 ${
              i !== members.length - 1 ? "border-b border-border" : ""
            }`}
          >
            <Avatar>
              {member.avatar ? <AvatarImage src={member.avatar} alt={member.name} /> : null}
              <AvatarFallback>{member.initials}</AvatarFallback>
            </Avatar>

            <div className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-sm font-medium text-fg">{member.name}</span>
              <span className="truncate text-sm text-fg-secondary">{member.email}</span>
            </div>

            <Badge variant={member.roleVariant}>{member.role}</Badge>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon-sm" aria-label={`Actions for ${member.name}`}>
                  <MoreHorizontal className="size-4" aria-hidden="true" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>{member.name}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Users className="size-4" aria-hidden="true" />
                  Change role
                </DropdownMenuItem>
                <DropdownMenuItem className="text-error focus:text-error">
                  <UserMinus className="size-4" aria-hidden="true" />
                  Remove
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </li>
        ))}
      </ul>
    </Card>
  );
}