"use client";

import Image from "next/image";

interface DiscordBannerPermanentProps {
  inviteLink: string;
  serverName?: string;
  description?: string;
  ctaText?: string;
}

export function DiscordBannerPermanent({
  inviteLink,
  serverName = "Avalon",
  description = "Looking for somewhere more... interesting? Avalon's an enchanted collective of botmakers who refuse to be boring 🌿 Come play with us~ (18+ only, darling)",
  ctaText = "Join Server",
}: DiscordBannerPermanentProps) {
  return (
    <div className="relative rounded-lg overflow-hidden shadow-lg mb-4 bg-[#36393f]">
      {/* Background Image */}
      <div className="absolute inset-0">
        <Image
          src="/avalon/bg.webp"
          alt="Background"
          fill
          className="object-cover opacity-20"
        />
      </div>

      {/* Content */}
      <div className="relative p-3 sm:p-4">
        {/* Chat Message Style */}
        <div className="flex gap-3 mb-2">
          {/* Morgana Avatar */}
          <div className="flex-shrink-0 pt-0.5">
            <Image
              src="/avalon/morgana-thumb.webp"
              alt="Morgana"
              width={40}
              height={40}
              className="rounded-full w-10 h-10"
            />
          </div>

          {/* Message Content */}
          <div className="flex-1 min-w-0">
            <div className="flex items-baseline gap-2 mb-0.5">
              <span className="text-white font-medium text-[15px]">Morgana</span>
              <span className="text-[#a3a6aa] text-[11px] font-medium">Today at {new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })}</span>
            </div>
            <div className="text-[#dcddde] text-[15px] leading-[1.375rem] mb-2">
              {description}
            </div>

            {/* Server Invite Embed */}
            <div className="bg-[#2f3136] rounded border-l-4 border-[#5865F2] overflow-hidden max-w-[432px]">
              <div className="p-4 pb-3">
                <div className="text-[#00b0f4] text-xs font-semibold uppercase mb-2">
                  You&apos;ve been invited to join a server
                </div>
                <div className="flex items-center gap-4">
                  <Image
                    src="/avalon/avalon-pfp.webp"
                    alt="Avalon"
                    width={50}
                    height={50}
                    className="rounded-2xl w-[50px] h-[50px] flex-shrink-0"
                  />
                  <div className="flex-1 min-w-0">
                    <div className="text-white font-semibold text-base mb-0.5">{serverName}</div>
                    <div className="text-[#b9bbbe] text-sm space-y-0.5">
                      <div className="font-medium">67 members</div>
                      <a
                        href="https://from-avalon.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-[#00aff4] hover:underline text-xs inline-block"
                      >
                        from-avalon.com
                      </a>
                    </div>
                  </div>
                  <a
                    href={inviteLink}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="bg-[#248046] hover:bg-[#1a6334] text-white px-4 py-2 text-sm rounded font-medium transition-colors flex-shrink-0"
                  >
                    {ctaText}
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Trash Panda Icon - Bottom Right */}
        <div className="absolute bottom-1.5 right-1.5">
          <Image
            src="/avalon/trashpanda.webp"
            alt=""
            width={20}
            height={20}
            className="rounded-full w-5 h-5 ring-1 ring-black/20 opacity-60 hover:opacity-100 transition-opacity"
          />
        </div>
      </div>
    </div>
  );
}