import { ImageIcon } from 'lucide-react'
import type { PageSection } from '../../../lib/page-editor-service.js'
import { PreviewButton, str } from './parts.js'

export function FeatureHighlightSection({ section }: { section: PageSection }) {
  const c = section.content
  const label = str(c, 'label')
  const heading = str(c, 'heading')
  const body = str(c, 'body')
  const imageUrl = str(c, 'imageUrl')
  const imageAlt = str(c, 'imageAlt')
  const imageLeft = str(c, 'imagePosition', 'right') === 'left'

  const text = (
    <div className="flex-1">
      {label && (
        <span className="bg-brand mb-3 inline-block rounded px-2 py-0.5 text-xs font-medium text-white">
          {label}
        </span>
      )}
      <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
        {heading}
      </h2>
      {body && <p className="text-muted-foreground mt-4 text-base leading-relaxed">{body}</p>}
      <div className="mt-6">
        <PreviewButton label={str(c, 'buttonLabel')} href={str(c, 'buttonUrl')} tone="primary" />
      </div>
    </div>
  )

  const media = (
    <div className="flex-1">
      {imageUrl ? (
        // Admin-only preview; next/image isn't in scope here.
        <img
          src={imageUrl}
          alt={imageAlt}
          className="aspect-[4/3] w-full rounded-xl object-cover"
        />
      ) : (
        <div className="bg-brand/10 flex aspect-[4/3] w-full items-center justify-center rounded-xl">
          <ImageIcon className="text-brand h-10 w-10" aria-hidden />
        </div>
      )}
    </div>
  )

  return (
    <div className="mx-auto max-w-5xl px-6">
      <div className="flex flex-col items-center gap-10 md:flex-row">
        {imageLeft ? (
          <>
            {media}
            {text}
          </>
        ) : (
          <>
            {text}
            {media}
          </>
        )}
      </div>
    </div>
  )
}
