'use client'

import { motion } from 'framer-motion'
import { Container } from '../ui/Container'
import { SectionHeader } from '../ui/SectionHeader'
import { cn } from '@/lib/utils'

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

export function TimelineBlock({ block }: TimelineBlockProps) {
  const title = (block.title as string) || (block.headline as string) || ''
  const subtitle = (block.subtitle as string) || ''
  const items = (block.items as Array<Record<string, unknown>>) || (block.events as Array<Record<string, unknown>>) || []

  return (
    <section className="py-ws-m">
      <Container width="narrow">
        {(title || subtitle) && (
          <SectionHeader title={title} subtitle={subtitle} />
        )}

        <div className="relative">
          {/* Vertical Line */}
          <div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-px bg-light md:-translate-x-px" />

          {/* Items */}
          <div className="space-y-12">
            {items.map((item, index) => {
              const year = (item.year as string) || (item.date as string) || ''
              const itemTitle = (item.title as string) || ''
              const description = (item.description as string) || (item.text as string) || ''

              return (
                <motion.div
                  key={index}
                  className="relative pl-12 md:pl-0 md:grid md:grid-cols-2 md:gap-8"
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1, duration: 0.5 }}
                >
                  {/* Dot */}
                  <div className="absolute left-0 md:left-1/2 w-3 h-3 bg-dark rounded-full md:-translate-x-1/2 mt-1" />

                  {/* Year (left on desktop) */}
                  <div className={cn(
                    'md:text-right md:pr-8',
                    index % 2 === 1 && 'md:order-2 md:text-left md:pl-8 md:pr-0'
                  )}>
                    <span className="font-heading font-bold text-[1em] tracking-[2px] uppercase text-accent">
                      {year}
                    </span>
                  </div>

                  {/* Content (right on desktop) */}
                  <div className={cn(
                    'md:pl-8',
                    index % 2 === 1 && 'md:order-1 md:pr-8 md:pl-0 md:text-right'
                  )}>
                    <h3 className="font-heading font-bold text-[1.07em] tracking-[3px] uppercase text-dark mb-2">
                      {itemTitle}
                    </h3>
                    <p className="text-gray leading-[1.8em]">
                      {description}
                    </p>
                  </div>
                </motion.div>
              )
            })}
          </div>
        </div>
      </Container>
    </section>
  )
}
