import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { Container } from '@/components/ui/Container'
import type { Page } from '@/payload-types'
import type { Media as MediaType } from '@/payload-types'

type SplitHeroProps = Page['hero'] & {
  eyebrow?: string
  heading?: string
  subtext?: string
  tags?: { tag: string }[]
  primaryCta?: { label?: string; url?: string }
  secondaryCta?: { label?: string; url?: string }
  splitImage?: MediaType | null
}

export const SplitHero: React.FC<SplitHeroProps> = function (props) {
  const { eyebrow, heading, subtext, tags, primaryCta, secondaryCta, splitImage } = props
  const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url

  return (
    // Removed border-b here to eliminate the line
    <div className="w-full">
      <Container className="px-0">
        <div className="grid grid-cols-1 md:grid-cols-2">
          {/* Text Content Column */}
          <div className="flex flex-col justify-center px-8 py-16 md:py-24">
            <div className="max-w-xl">
              <div className="flex items-center gap-2 mb-6">
                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shrink-0" />
                <span className="text-xs tracking-wider uppercase text-foreground/60">
                  Available for hire
                </span>
              </div>

              {eyebrow && (
                <p className="text-xs tracking-widest uppercase text-foreground/40 mb-4">
                  {eyebrow}
                </p>
              )}

              {heading && (
                <h1 className="text-5xl md:text-6xl font-bold text-foreground leading-[1.1] mb-6 whitespace-pre-line">
                  {heading}
                </h1>
              )}

              {subtext && (
                <p className="text-base text-foreground/60 leading-relaxed mb-8">{subtext}</p>
              )}

              {Array.isArray(tags) && tags.length > 0 && (
                <div className="flex flex-wrap gap-2 mb-10">
                  {tags.map(function ({ tag }, i) {
                    return (
                      <span
                        key={i}
                        className="text-xs text-foreground/60 border border-foreground/10 rounded-full px-4 py-1.5"
                      >
                        {tag}
                      </span>
                    )
                  })}
                </div>
              )}

              <div className="flex flex-wrap gap-4">
                {primaryCta?.url && (
                  <Link
                    href={primaryCta.url}
                    className="flex items-center gap-2 text-sm font-medium bg-foreground text-background rounded-lg px-6 py-3 hover:opacity-90 transition-opacity"
                  >
                    <i className="ti ti-briefcase" aria-hidden="true" />
                    {primaryCta.label || 'View my work'}
                  </Link>
                )}
                {secondaryCta?.url && (
                  <Link
                    href={secondaryCta.url}
                    className="flex items-center gap-2 text-sm text-foreground border border-foreground/20 rounded-lg px-6 py-3 hover:bg-foreground/5 transition-colors"
                  >
                    <i className="ti ti-mail" aria-hidden="true" />
                    {secondaryCta.label || 'Get in touch'}
                  </Link>
                )}
              </div>
            </div>
          </div>

          {/* Image Column */}
          <div className="relative min-h-[400px] md:min-h-auto w-full">
            {hasImage ? (
              <Image
                src={splitImage.url!}
                alt={splitImage.alt ?? 'Hero image'}
                fill
                className="object-contain md:object-cover object-bottom"
                priority
              />
            ) : (
              <div className="absolute inset-0 flex items-center justify-center bg-foreground/5">
                <i className="ti ti-user text-6xl opacity-20" aria-hidden="true" />
              </div>
            )}
          </div>
        </div>
      </Container>
    </div>
  )
}
