import { User } 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 UserCard({ user, subtitle }: { user: User; subtitle: string }) {
  return (
    <Link href={`/panel/inspect/${user._id}`}>
      <Card
        className="shadow-none bg-no-repeat bg-right text-left"
        style={{
          backgroundImage: user.profile?.background
            ? `linear-gradient(to right, white, rgba(255,0,0,0)), url('https://autumn.revolt.chat/backgrounds/${user.profile.background._id}')`
            : "",
          backgroundSize: "75%",
        }}
      >
        <CardHeader>
          <CardTitle>
            <Avatar>
              <AvatarImage
                src={`https://autumn.revolt.chat/avatars/${user.avatar?._id}`}
              />
              <AvatarFallback>
                {(user.display_name ?? user.username)
                  .split(" ")
                  .slice(0, 2)
                  .join("")}
              </AvatarFallback>
            </Avatar>
            {user.username}#{user.discriminator} {user.display_name}
          </CardTitle>
          <CardDescription>{subtitle}</CardDescription>
        </CardHeader>
      </Card>
    </Link>
  );
}