'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'
import { Button } from '../ui/Button'
import { cn } from '@/lib/utils'

interface ImageTextBlockProps {
  block: Record<string, unknown>
}

export function ImageTextBlock({ block }: ImageTextBlockProps) {
  const title = (block.headline as string) || (block.title as string) || ''
  const subtitle = (block.subheadline as string) || (block.subtitle as string) || ''
  const content = (block.content as string) || (block.text as string) || ''
  const media = block.image as Record<string, unknown> | undefined
  const imageUrl = (media?.url as string) || ''
  const imageAlt = (media?.alt as string) || title
  const imagePosition = (block.imagePosition as string) || 'left'
  const ctaLabel = (block.ctaLabel as string) || (block.buttonText as string) || ''
  const ctaLink = (block.ctaLink as string) || (block.buttonLink as string) || ''
  const backgroundColor = (block.backgroundColor as string) || 'light'

  const isImageLeft = imagePosition === 'left'

  return (
    <section className={cn(backgroundColor === 'light' && 'bg-light-bg')}>
      <div className="grid grid-cols-1 lg:grid-cols-2">
        {/* Image */}
        <motion.div
          className={cn(
            'relative h-[300px] lg:h-[450px] overflow-hidden',
            isImageLeft ? 'lg:order-1' : 'lg:order-2'
          )}
          initial={{ opacity: 0, x: isImageLeft ? -30 : 30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          {imageUrl ? (
            <Image
              src={imageUrl}
              alt={imageAlt}
              fill
              className="object-cover"
            />
          ) : (
            <div className="w-full h-full bg-light" />
          )}
        </motion.div>

        {/* Content */}
        <motion.div
          className={cn(
            'py-[75px] px-8 lg:px-[100px] lg:pr-[15%]',
            'h-auto lg:h-[450px]',
            'bg-light-bg flex flex-col justify-center',
            isImageLeft ? 'lg:order-2' : 'lg:order-1'
          )}
          initial={{ opacity: 0, x: isImageLeft ? 30 : -30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          {/* Subtitle */}
          {subtitle && (
            <span className="font-heading text-[0.85em] tracking-[2px] uppercase text-gray-light mb-0">
              {subtitle}
            </span>
          )}

          {/* Title */}
          <h2 className="font-heading font-bold text-[1.5em] tracking-[4px] uppercase text-dark mt-[15px] mb-[50px]">
            {title}
          </h2>

          {/* Content */}
          <div
            className="font-body text-gray leading-[1.8em] mb-[45px]"
            dangerouslySetInnerHTML={{ __html: content }}
          />

          {/* CTA */}
          {ctaLabel && ctaLink && (
            <div>
              <Button href={ctaLink} variant="ghost">
                {ctaLabel}
              </Button>
            </div>
          )}
        </motion.div>
      </div>
    </section>
  )
}
