
"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { UserPlus, Building, Users } from "lucide-react";
import { cn } from "@/lib/utils";

export default function CTASidebar() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <div className="hidden lg:block fixed left-4 top-1/2 -translate-y-1/2 z-40">
      <div className="space-y-3">
        <Button
          asChild
          variant="primary"
          className={cn(
            "w-48 h-12 rounded-full font-semibold text-sm",
            "shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105"
          )}
        >
          <Link href="/registro-instructor" className="flex items-center justify-center space-x-2">
            <UserPlus className="h-4 w-4" />
            <span>Registro Instructor</span>
          </Link>
        </Button>

        <Button
          asChild
          variant="primary"
          className={cn(
            "w-48 h-12 rounded-full font-semibold text-sm",
            "shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105"
          )}
        >
          <Link href="/registro-institucion" className="flex items-center justify-center space-x-2">
            <Building className="h-4 w-4" />
            <span>Registro Institución</span>
          </Link>
        </Button>

        <Button
          asChild
          variant="success"
          className={cn(
            "w-48 h-12 rounded-full font-semibold text-sm",
            "shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105"
          )}
        >
          <Link href="/registro-jugador" className="flex items-center justify-center space-x-2">
            <Users className="h-4 w-4" />
            <span>Registro Jugador</span>
          </Link>
        </Button>
      </div>
    </div>
  );
}
