import { Server } from "revolt-api";
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { AUTUMN_URL } from "@/lib/constants";

export function ServerCard({
  server,
  subtitle,
}: {
  server: Server;
  subtitle: string;
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>
          <Avatar>
            <AvatarImage src={`${AUTUMN_URL}/icons/${server.icon?._id}`} />
            <AvatarFallback>
              {server.name
                .split(" ")
                .slice(0, 2)
                .map((x) => String.fromCodePoint(x.codePointAt(0) ?? 32) ?? "")
                .join("")}
            </AvatarFallback>
          </Avatar>
          {server.name}
        </CardTitle>
        <CardDescription>{subtitle}</CardDescription>
      </CardHeader>
    </Card>
  );
}
