import Link from "next/link";
import { Separator } from "../ui/separator";
import { Article, ArticleList } from "@/features/posts/_lib/transformers";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { cn } from "@/lib/utils/cn";
import { Routes } from "@/config/routes";

export default function PostAuthor({ data }: { data: Article | ArticleList[number] }) {
    if (!data.author) {
        return null;
    }
    return (
        <div className="w-full font-serif leading-none">
            {data.showAuthorPhoto && (
                <Avatar className="mx-auto size-38 shrink-0 self-center">
                    <AvatarImage
                        className="w-full object-cover"
                        src={data.author?.avatar?.url || data.author?.image || ""}
                        alt={data.author?.name || "Avatar image"}
                    />
                    <AvatarFallback className="text-4xl font-bold text-neutral-400">Author</AvatarFallback>
                </Avatar>
            )}

            <Separator className="my-2" />
            <div className="flex flex-col gap-1">
                {data.author?.name && (
                    <Link
                        href={`${Routes.AUTHOR}/${data.author.slug}`}
                        className={cn(
                            "relative w-fit text-xl no-underline hover:underline",
                            !data.author.hasPage && "pointer-events-none"
                        )}
                    >
                        {data.author?.name}
                    </Link>
                )}

                {data.author?.jobInfo && <span className="text-neutral-400">{data.author?.jobInfo}</span>}
            </div>
        </div>
    );
}