import type { contentType } from "../content/content";
import { useNavStore } from "../store";
import { Profile } from "./Profile";
import { useState, useEffect } from "react";

export const Auth = ({
  content,
  langPrefix,
}: {
  content: contentType;
  langPrefix: string;
}) => {
  const { user } = useNavStore();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(false);
  }, []);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center">
        <div className="w-5 h-5 border-2 border-[#27ae60] border-t-transparent rounded-full animate-spin"></div>
      </div>
    );
  }

  return user ? (
    <Profile content={content.profile} />
  ) : (
    <div className="flex items-center gap-3">
      {/* Login */}
      <a
        href={`${langPrefix}/login`}
        className="bg-[#27ae60] hover:bg-[#229954] text-white font-semibold px-5 py-2 rounded-lg transition-colors"
      >
        {content.logIn}
      </a>
      {/* Sign Up */}
      <a
        href={`${langPrefix}/signup`}
        className="text-gray-700 hover:text-gray-900 font-semibold px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors"
      >
        {content.signUp}
      </a>
    </div>
  );
};