"use client";

// ============================================================================
// Demo Banner Component
// ============================================================================

import Link from "next/link";
import { Sparkles, ArrowRight, X } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { BOT_USERNAME } from "@/lib/utils/constants";

interface DemoBannerProps {
  className?: string;
}

export const DemoBanner: React.FC<DemoBannerProps> = ({ className }) => {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  return (
    <div
      className={`
        relative w-full bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500
        text-white py-2.5 px-4 text-center text-sm font-medium
        shadow-lg shadow-fuchsia-500/20
        ${className || ""}
      `}
    >
      <div className="flex items-center justify-center gap-2 flex-wrap">
        <Sparkles className="h-4 w-4 animate-pulse" />
        <span>Вы просматриваете демо-версию платформы</span>
        <span className="hidden sm:inline text-white/80">•</span>
        <a
          href={`https://t.me/${BOT_USERNAME}?start=register`}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 font-semibold underline underline-offset-2 hover:text-white/90 transition-colors"
        >
          Создать свой кабинет
          <ArrowRight className="h-3.5 w-3.5" />
        </a>
        <span className="text-white/60 hidden md:inline">
          и опробовать всю мощь платформы!
        </span>
      </div>

      <button
        onClick={() => setIsVisible(false)}
        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-white/20 transition-colors"
        aria-label="Закрыть баннер"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  );
};