import Link from "next/link";
import { ExternalLink } from "lucide-react";

import { Space as SpaceProps } from "@/utils/types";
import { SpaceAuthor } from "./sub/author";
import { SpaceHeader } from "./sub/header";

export const Space: React.FC<{ space: SpaceProps }> = ({ space }) => {
  return (
    <main className="w-full rounded-xl grid grid-cols-1 gap-3">
      <SpaceHeader space={space} />
      <div className="flex items-start justify-between">
        <p className="text-[1.95rem] leading-[2rem] text-white/80 font-light">
          {space?.title}
        </p>
        <Link
          href={`https://huggingface.co/spaces/${space.id}`}
          target="_blank"
        >
          <ExternalLink
            size={24}
            className="text-white/70 hover:text-blue-500"
          />
        </Link>
      </div>
      <SpaceAuthor author={space?.authorData} />
      {space?.shortDescription && (
        <p className="text-xl font-serif text-white/60 flex items-center justify-start gap-1.5 line-clamp-1">
          Explore thousands of community trained LoRAs.
        </p>
      )}
    </main>
  );
};