"use client"

import Link from 'next/link'

interface MGMButtonProps {
    text: string
    href?: string
    onClick?: () => void
    className?: string
    target?: string
    rel?: string
}

export default function MGMButton({ text, href, onClick, className = '', target, rel }: MGMButtonProps) {
    const content = (
        <div className={`group inline-flex max-w-full items-center rounded-[66px] bg-[#d20010] pl-[2px] py-[2px] transition-colors hover:bg-[#b8000e] ${className}`}>
          <span className="inline-flex items-center justify-center rounded-[44px] bg-white px-[14px] py-[8px] sm:px-[24px] sm:py-[12px]">
            <span className="font-sans font-medium text-[#1c2023] text-[11px] sm:text-base tracking-[0.32px] uppercase leading-tight sm:leading-[22px] whitespace-normal sm:whitespace-nowrap">
              {text}
            </span>
          </span>
          <span className="ml-[4px] mr-[4px] sm:ml-[6px] sm:mr-[6px] inline-flex h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] flex-shrink-0 items-center justify-center">
            <svg 
              width="8" 
              height="14" 
              viewBox="0 0 7.5 13.5" 
              fill="none" 
              xmlns="http://www.w3.org/2000/svg"
            >
              <path 
                d="M0.75 0.75C0.75 0.75 6.75 5.169 6.75 6.75C6.75 8.331 0.75 12.75 0.75 12.75" 
                stroke="#FAFAFA" 
                strokeWidth="1.5" 
                strokeLinecap="round" 
                strokeLinejoin="round"
              />
            </svg>
          </span>
        </div>
    )

    if (href) {
        const isInternal = href.startsWith('/') && !href.startsWith('//')
        const resolvedRel = rel || (target === '_blank' ? 'noopener noreferrer' : undefined)

        if (isInternal) {
            return (
                <Link href={href} className="inline-block" target={target} rel={resolvedRel}>
                    {content}
                </Link>
            )
        }
        return (
            <a href={href} className="inline-block" target={target} rel={resolvedRel}>
                {content}
            </a>
        )
    }

    return (
        <button onClick={onClick} className="inline-block focus:outline-none">
            {content}
        </button>
    )
}