Team Invitation

"use client";

import { Clock, ShieldCheck, UserPlus, Users } from "lucide-react";
import {
  TeamInvitation,
  TeamInvitationCard,
  TeamInvitationDescription,
  TeamInvitationHeader,
  TeamInvitationInviteField,
  TeamInvitationMemberList,
  TeamInvitationPanel,
  TeamInvitationPanels,
  TeamInvitationPendingList,
  TeamInvitationRoleGroups,
  TeamInvitationTab,
  TeamInvitationTabs,
  TeamInvitationTitle,
} from "@/components/ui/team-invitation";

const members = [
  {
    id: "trevor",
    name: "Trevor Phillips",
    email: "trevorphillips@gmail.com",
    role: "Assistant",
    avatar: "/assets/av1.png",
  },
  {
    id: "michael",
    name: "Michael De Santa",
    email: "michaeldesanta@gmail.com",
    role: "Junior Level",
    avatar: "/assets/av2.png",
  },
  {
    id: "franklin",
    name: "Franklin Clinton",
    email: "franklinclinton@gmail.com",
    role: "Senior Level",
    avatar: "/assets/av3.png",
  }
];

export function TeamInvitationPreview() {
  return (
    <TeamInvitation
      defaultVariant="invite"
      members={members}
      onInvite={(email) => console.log("invite", email)}
      onRoleChange={(id, role) => console.log(id, role)}
      pendingInvites={[
        { id: "jhon", email: "jhon@wick.com", sentAt: "Sent 2d ago" },
      ]}
      roles={["Assistant", "Junior Level", "Senior Level"]}
    >
      <TeamInvitationCard>
        <TeamInvitationHeader icon={<Users />}>
          <TeamInvitationTitle>Invite Team Member</TeamInvitationTitle>
          <TeamInvitationDescription>
            Share tasks with other users
          </TeamInvitationDescription>
        </TeamInvitationHeader>
        <TeamInvitationTabs>
          <TeamInvitationTab icon={<UserPlus />} value="invite">
            Invite Members
          </TeamInvitationTab>
          <TeamInvitationTab icon={<Users />} value="manage">
            Manage Team
          </TeamInvitationTab>
          <TeamInvitationTab icon={<ShieldCheck />} value="roles">
            Role Management
          </TeamInvitationTab>
          <TeamInvitationTab icon={<Clock />} value="pending">
            Pending Invites
          </TeamInvitationTab>
        </TeamInvitationTabs>
        <TeamInvitationPanels>
          <TeamInvitationPanel value="invite">
            <TeamInvitationInviteField
              buttonLabel="Invite Member"
              label="Email"
            />
            <TeamInvitationMemberList action="role" label="Member Lists" />
          </TeamInvitationPanel>
          <TeamInvitationPanel value="manage">
            <TeamInvitationMemberList
              action="remove"
              emptyMessage="No members yet. Invite someone first."
              label="Team Members"
            />
          </TeamInvitationPanel>
          <TeamInvitationPanel value="roles">
            <TeamInvitationRoleGroups emptyMessage="No members with this role yet." />
          </TeamInvitationPanel>
          <TeamInvitationPanel value="pending">
            <TeamInvitationPendingList
              emptyMessage="No pending invites. Invite someone from the Invite Members tab."
              label="Pending Invites"
            />
          </TeamInvitationPanel>
        </TeamInvitationPanels>
      </TeamInvitationCard>
    </TeamInvitation>
  );
}