'use client'

import type { ComponentRenderProps } from '@json-render/react'

type TimelineEvent = {
  id: string; title: string; description?: string
  timestamp: string; icon?: string; variant?: string
}

const iconMap: Record<string, string> = {
  email: '📧', phone: '📞', note: '📝', meeting: '📅', task: '✅', system: '⚙️',
}

const variantBorder: Record<string, string> = {
  default: 'border-gray-300',
  success: 'border-green-400',
  warning: 'border-yellow-400',
  error: 'border-red-400',
}

export function Timeline({ element }: ComponentRenderProps) {
  const { events } = element.props as { events: TimelineEvent[] }

  return (
    <div className="relative pl-6">
      <div className="absolute left-2 top-2 bottom-2 w-0.5 bg-gray-200" />
      {events.map((e) => (
        <div key={e.id} className="relative mb-4 last:mb-0">
          <div className={`absolute -left-4 top-1 w-4 h-4 rounded-full border-2 bg-white flex items-center justify-center text-[8px] ${variantBorder[e.variant || 'default'] || variantBorder.default}`}>
            {iconMap[e.icon || 'system'] || '•'}
          </div>
          <div className="ml-2">
            <div className="font-medium text-sm text-gray-900">{e.title}</div>
            {e.description && <div className="text-sm text-gray-500 mt-0.5">{e.description}</div>}
            <div className="text-xs text-gray-400 mt-0.5">{e.timestamp}</div>
          </div>
        </div>
      ))}
    </div>
  )
}
