import React from "react";
import type { Lobby } from "@/server/db/schema";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Link from "next/link";
import { formatDate } from "@/lib/utils";
import { ArrowRight, ChevronRight } from "lucide-react";
import { appRoutes } from "@/config/app.routes";

function LobbyCard({ lobby }: { lobby: Lobby }) {
  return (
    <Link href={appRoutes.lobby(lobby.id)}>
      <Card className="group border-none bg-transparent p-0 shadow-none">
        <div className="container-bg py-4">
          <CardHeader className="flex w-full items-center justify-between">
            <div className="">
              <CardTitle className="text-lg">{lobby.name}</CardTitle>
              <CardDescription className="text-xs">
                {formatDate(lobby.createdAt)}
              </CardDescription>
            </div>
            <div className="">
              <ChevronRight className="text-border/20 size-12 transition-colors duration-150 group-hover:text-white" />
            </div>
          </CardHeader>
        </div>
      </Card>
    </Link>
  );
}

export default LobbyCard;