import { Server } from "revolt-api";
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import Link from "next/link";

export function ServerCard({
  server,
  subtitle,
}: {
  server: Server;
  subtitle: string;
}) {
  return (
    <Card className="shadow-none">
      <CardHeader>
        <CardTitle>
          <Avatar>
            <AvatarImage
              src={`https://autumn.revolt.chat/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>
  );
}