import { businessConfig } from "@/lib/seo-config"
import { Phone, Mail, Globe } from "lucide-react"

interface NAPDataProps {
  variant?: "inline" | "vertical" | "compact"
  showIcons?: boolean
  className?: string
}

/**
 * NAP (Name, Address, Phone) Data Component
 * Displays consistent business contact information with microdata markup
 * Service-only business (no physical address)
 */
export function NAPData({
  variant = "vertical",
  showIcons = true,
  className = "",
}: NAPDataProps) {
  const baseClasses =
    variant === "inline"
      ? "flex flex-wrap items-center gap-4"
      : "flex flex-col gap-2"

  return (
    <div
      className={`${baseClasses} ${className}`}
      itemScope
      itemType="https://schema.org/LocalBusiness"
    >
      <meta itemProp="name" content={businessConfig.name} />
      <meta itemProp="legalName" content={businessConfig.legalName} />
      <meta itemProp="url" content={businessConfig.website} />
      <meta itemProp="telephone" content={businessConfig.phoneFormatted} />
      <meta itemProp="email" content={businessConfig.email} />
      <meta itemProp="description" content={businessConfig.description} />

      {/* Phone */}
      <div itemProp="telephone" className="flex items-center gap-2">
        {showIcons && <Phone className="h-4 w-4 flex-shrink-0" />}
        <a
          href={businessConfig.phoneUrl}
          className="hover:text-foreground transition-colors"
          aria-label={`Call ${businessConfig.name} at ${businessConfig.phone}`}
        >
          {businessConfig.phone}
        </a>
      </div>

      {/* Email */}
      <div itemProp="email" className="flex items-center gap-2">
        {showIcons && <Mail className="h-4 w-4 flex-shrink-0" />}
        <a
          href={`mailto:${businessConfig.email}`}
          className="hover:text-foreground transition-colors"
          aria-label={`Email ${businessConfig.name} at ${businessConfig.email}`}
        >
          {businessConfig.email}
        </a>
      </div>

      {/* Website */}
      <div itemProp="url" className="flex items-center gap-2">
        {showIcons && <Globe className="h-4 w-4 flex-shrink-0" />}
        <a
          href={businessConfig.website}
          target="_blank"
          rel="noopener noreferrer"
          className="hover:text-foreground transition-colors"
          aria-label={`Visit ${businessConfig.name} website`}
        >
          {businessConfig.website.replace(/^https?:\/\//, "")}
        </a>
      </div>
    </div>
  )
}

/**
 * Compact NAP display for headers/footers
 */
export function NAPDataCompact({ className = "" }: { className?: string }) {
  return (
    <div
      className={`flex flex-wrap items-center gap-4 text-sm ${className}`}
      itemScope
      itemType="https://schema.org/LocalBusiness"
    >
      <meta itemProp="name" content={businessConfig.name} />
      <meta itemProp="telephone" content={businessConfig.phoneFormatted} />
      <meta itemProp="email" content={businessConfig.email} />

      <a
        href={businessConfig.phoneUrl}
        itemProp="telephone"
        className="hover:text-foreground transition-colors"
      >
        {businessConfig.phone}
      </a>
      <span className="text-muted-foreground">•</span>
      <a
        href={`mailto:${businessConfig.email}`}
        itemProp="email"
        className="hover:text-foreground transition-colors"
      >
        {businessConfig.email}
      </a>
    </div>
  )
}