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(props: ContactBlockProps) {
  const { heading, subtext, email, links } = props

  return (
    <section className="w-full max-w-5xl mx-auto px-6 py-12">
      <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 && (
            <a
              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(function (link, i) {
              return (
                <a
                  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>
  )
}
