"use client"

import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { ChannelInvite } from "@/lib/db";
import Link from "next/link";
import { Channel, User } from "revolt-api";

export function InviteCard({
  invite,
  channel,
  user,
}: {
  invite: ChannelInvite;
  channel?: Channel;
  user?: User;
}) {
  return (
    <Card className="my-2">
      <CardHeader>
        <CardTitle className="flex items-center">
          <span className="font-extralight mr-0.5 select-none">rvlt.gg/</span>{invite._id}
          <span className="select-none">{" "}</span> {/* looks better like this when for some reason the css doesnt load */}
          {invite.vanity
            ? <span
                className="select-none ml-2 p-1.5  bg-gray-400 text-white rounded-md font-normal text-base"
            >
                Vanity
            </span>
            : <></>}
        </CardTitle>
        <CardDescription>
            {invite.type}
            {" • "}
            <Link href={`/panel/inspect/channel/${invite.channel}`}>
                {(
                    channel &&
                    channel.channel_type != "DirectMessage" &&
                    channel.channel_type != "SavedMessages"
                )
                    ? `#${channel.name}`
                    : <i>Unknown Channel</i>}
            </Link>
            {" • "}
            <Link href={`/panel/inspect/user/${invite.creator}`}>
                {user ? `${user.username}#${user.discriminator}` : <i>Unknown Creator</i>}
            </Link>
        </CardDescription>
      </CardHeader>
    </Card>
  );
}