import React from 'react'

type ContactLink = {
  label: string
  sublabel?: string
  url: string
  icon?: string
  newTab?: boolean
}

type ContactBlockProps = {
  heading?: string
  subtext?: string
  email?: string
  links?: ContactLink[]
}

export function ContactBlock({
  heading,
  subtext,
  email,
  links,
}: ContactBlockProps) {
  return (
    <section className="w-full max-w-5xl mx-auto px-6 py-16">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">

        <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
          <div>
            {heading && (
              <h2 className="text-xl font-medium text-foreground mb-3">{heading}</h2>
            )}
            {subtext && (
              <p className="text-sm text-foreground/50 leading-relaxed">{subtext}</p>
            )}
          </div>
          {email && (
            
              href={`mailto:${email}`}
              className="self-start flex items-center gap-2 text-sm font-medium text-foreground/70 bg-background/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground hover:bg-muted transition-colors"
            >
              <i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
              Get in touch
            </a>
          )}
        </div>

        <div className="flex flex-col gap-2">
          {Array.isArray(links) && links.map((link, i) => (
            
              key={i}
              href={link.url}
              target={link.newTab ? '_blank' : '_self'}
              rel="noopener noreferrer"
              className="flex items-center gap-3 bg-muted/50 border border-foreground/8 rounded-xl px-5 py-4 hover:bg-muted/70 transition-colors group"
            >
              {link.icon && (
                <i
                  className={`ti ${link.icon} text-foreground/40 group-hover:text-foreground/60 transition-colors`}
                  style={{ fontSize: 18 }}
                  aria-hidden="true"
                />
              )}
              <div className="flex flex-col">
                <span className="text-sm font-medium text-foreground/70 group-hover:text-foreground/90 transition-colors">
                  {link.label}
                </span>
                {link.sublabel && (
                  <span className="text-xs text-foreground/30">{link.sublabel}</span>
                )}
              </div>
              <i
                className="ti ti-arrow-right text-foreground/20 group-hover:text-foreground/40 transition-colors ml-auto"
                style={{ fontSize: 14 }}
                aria-hidden="true"
              />
            </a>
          ))}
        </div>

      </div>
    </section>
  )
}