import LoadingSpinner from "@/shared/components/loading-spinner";
import { CardContent, Card } from "@/shared/components/ui/card";
import { Mapset } from "@/shared/types/mapset";
import { Download, Eye } from "lucide-react";
import dynamic from "next/dynamic";

const PreviewMap = dynamic(() => import("@/shared/components/preview-map"), {
  ssr: false,
  loading: () => <LoadingSpinner />,
});

export function MainMapsetCard({ mapset }: Readonly<{ mapset: Mapset }>) {
  return (
    <Card className="font-onest h-full w-full overflow-hidden p-0">
      <CardContent className="relative flex h-full flex-col p-0">
        <div className="relative aspect-video w-full">
          <PreviewMap mapset={mapset} />
        </div>
        <span className="absolute top-2 left-2 z-[1000] rounded-lg bg-[#FFD600] px-2 py-1 text-xs font-medium text-black">
          {mapset?.category?.name}
        </span>

        <div className="flex flex-1 flex-col space-y-3 p-5">
          <a href={`/maps?mapset-id=${mapset.id}`} rel="noopener noreferrer">
            <h3 className="hover:text-primary md:text-md mb-0 line-clamp-4 text-base font-medium sm:text-lg lg:line-clamp-2 lg:text-lg xl:line-clamp-3 xl:text-lg">
              {mapset.name}
            </h3>
          </a>

          <div className="mt-auto pt-2">
            <div className="flex w-full items-center justify-between gap-4 text-zinc-500">
              <div className="flex items-center gap-1">
                <Eye className="h-4 w-4" />
                <span>{mapset.view_count}</span>
              </div>
              <div className="flex items-center gap-1">
                <Download className="h-4 w-4" />
                <span>{mapset.download_count}</span>
              </div>
            </div>
            {/* <a
              href={`/maps?mapset-id=${mapset.id}`}
              className="text-primary inline-flex items-center hover:underline"
              rel="noopener noreferrer"
            >
              <div className="flex w-full items-center justify-between gap-4 text-zinc-500">
                <div className="flex items-center gap-1">
                  <Eye className="h-4 w-4" />
                  <span>2.450</span>
                </div>
                <div className="flex items-center gap-1">
                  <Download className="h-4 w-4" />
                  <span>892</span>
                </div>
              </div>
            </a> */}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}