'use client'

import React from 'react'
import { ImageMedia } from '@/components/Media/ImageMedia'
import type { Media as MediaType } from '@/payload-types'

type ButtonGroup = {
  label?: string
  url?: string
  newTab?: boolean
}

type AboutProfileBlockProps = {
  imagePosition?: 'left' | 'right'
  image?: MediaType | null
  heading?: string
  subheading?: string
  body?: string
  primaryButton?: ButtonGroup
  secondaryButton?: ButtonGroup
}

export function AboutProfileBlock({
  imagePosition = 'left',
  image,
  heading,
  subheading,
  body,
  primaryButton,
  secondaryButton,
}: AboutProfileBlockProps) {
  const isRight = imagePosition === 'right'

  const imageEl = image ? (
    <div className="w-full sm:w-[340px] shrink-0 rounded-xl overflow-hidden bg-muted/50">
      <ImageMedia
        resource={image}
        imgClassName="w-full h-auto object-cover"
        size="(max-width: 640px) 100vw, 340px"
      />
    </div>
  ) : null

  const hasPrimary = primaryButton?.label && primaryButton?.url
  const hasSecondary = secondaryButton?.label && secondaryButton?.url

  return (
    // Standardized vertical padding and alignment
    <section className="w-full max-w-5xl mx-auto py-12 md:py-28">
      {(heading || subheading) && (
        <div className="text-center mb-16">
          {heading && (
            <h2 className="text-3xl font-semibold tracking-tight text-foreground mb-3">
              {heading}
            </h2>
          )}
          {subheading && (
            <p className="text-xs tracking-widest uppercase text-foreground/30">{subheading}</p>
          )}
        </div>
      )}

      <div
        className={`flex flex-col sm:flex-row gap-12 items-center ${isRight ? 'sm:flex-row-reverse' : ''}`}
      >
        {imageEl}

        <div className="flex flex-col gap-6 flex-1">
          {body && (
            <p className="text-sm text-foreground/60 leading-relaxed whitespace-pre-line">{body}</p>
          )}

          {(hasPrimary || hasSecondary) && (
            <div className="flex flex-wrap gap-3 mt-2">
              {hasPrimary && (
                <a
                  href={primaryButton.url}
                  download
                  className="flex items-center gap-2 text-sm px-5 py-2.5 rounded-lg bg-muted/50 border border-foreground/10 text-foreground/70 hover:text-foreground/90 hover:bg-muted transition-colors"
                >
                  <i className="ti ti-download" style={{ fontSize: 15 }} aria-hidden="true" />
                  {primaryButton.label}
                </a>
              )}
              {hasSecondary && (
                <a
                  href={secondaryButton.url}
                  target={secondaryButton.newTab ? '_blank' : '_self'}
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 text-sm px-5 py-2.5 rounded-lg bg-muted/50 border border-foreground/10 text-foreground/70 hover:text-foreground/90 hover:bg-muted transition-colors"
                >
                  <i className="ti ti-external-link" style={{ fontSize: 15 }} aria-hidden="true" />
                  {secondaryButton.label}
                </a>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  )
}
