import React from "react";
import TopicItems from "./TopicItem";
import { useIsLoggedIn } from '../lib/isLoggedIn';

const topicPageDesc = 'Cutting-edge discussions on tech, digital services, news, and digital freedom. Stay informed on AI, cybersecurity, privacy, and the future of innovation.';

export default function TopicCreation(props) {
    const { isLoggedIn, loading, error } = useIsLoggedIn();

    if (loading) {
        return <div className="loading-indicator">Loading...</div>;
    }

    if (error) {
        return <div className="error-message">Error loading authentication status</div>;
    }

    return (
        <>
            {isLoggedIn && (
                <div className="container mx-auto flex justify-end gap-x-4">
                    <a href="/topic/new" className="create-new-link">Create New</a>
                    <a href="/topic/my-topic">My Topics</a>
                </div>
            )}
            <TopicItems  topics={props.topics} title="SoliconPin Topics" description={topicPageDesc} />
        </>
    );
}