import Link from "next/link";
import { Quote } from "lucide-react";
import { Tag } from "@/types/interfaces";

export default function PostTag({ data }: { data: Tag | Tag[] | null | undefined }) {
    if (!data) {
        return null;
    }

    if (data instanceof Array) {
        return (
            <div>
                <p className="mb-4 text-xs font-semibold text-[#303030] uppercase">Emner</p>
                <ul className="flex flex-wrap gap-3">
                    {data.map((tag, index) => (
                        <li key={index}>
                            <Link
                                href={tag.url}
                                className="bg-client-light-gray inline-block px-5 py-1.5 text-sm tracking-widest text-[#303030] transition hover:bg-neutral-400 hover:text-white"
                            >
                                {tag.name}
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }

    return (
        <Link href={data.url} className="text-client-red relative z-10 mb-1 flex w-fit gap-1 font-medium tracking-wide">
            {data.name === "kommentar" && <Quote className="fill-client-red size-5 rotate-180" />}
            <span className="hover:underline">{data.name}</span>
        </Link>
    );
}