'use client'

import { motion } from 'framer-motion'

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

export function QuoteBlock({ block }: QuoteBlockProps) {
  const quote = (block.quote as string) || (block.text as string) || ''
  const author = (block.author as string) || (block.attribution as string) || ''
  const role = (block.role as string) || ''
  const backgroundMedia = block.backgroundImage as Record<string, unknown> | undefined
  const backgroundUrl = backgroundMedia?.url as string | undefined
  const style = (block.style as string) || (backgroundUrl ? 'parallax' : 'simple')

  if (style === 'simple') {
    return (
      <section className="py-ws-m bg-light-bg">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <blockquote className="text-[1.4em] leading-[1.6em] text-gray italic mb-8">
            &ldquo;{quote}&rdquo;
          </blockquote>
          <footer>
            <cite className="font-heading text-[1em] tracking-[2px] uppercase text-dark not-italic block mb-2">
              {author}
            </cite>
            {role && (
              <span className="font-heading text-[0.85em] tracking-[2px] uppercase text-gray-light">
                {role}
              </span>
            )}
          </footer>
        </div>
      </section>
    )
  }

  return (
    <section
      className="relative bg-cover bg-center bg-fixed"
      style={{
        backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : undefined,
        backgroundColor: !backgroundUrl ? '#111' : undefined,
      }}
    >
      {/* Overlay */}
      <div className="absolute inset-0 bg-dark/50" />

      {/* Content */}
      <motion.div
        className="relative py-ws-m w-[90%] md:w-[55%] mx-auto text-center"
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
      >
        {/* Quote Icon */}
        <span className="block text-[34px] text-white/50 mb-6">&#10077;</span>

        {/* Quote */}
        <blockquote className="text-[1.2em] md:text-[1.4em] leading-[1.6em] text-white mb-8">
          &ldquo;{quote}&rdquo;
        </blockquote>

        {/* Author */}
        <footer>
          <cite className="font-heading text-[1em] tracking-[2px] uppercase text-white not-italic block mb-2">
            {author}
          </cite>
          {role && (
            <span className="font-heading text-[0.85em] tracking-[2px] uppercase text-gray-light">
              {role}
            </span>
          )}
        </footer>
      </motion.div>
    </section>
  )
}
