← back to Goodquestion

src/components/historical/HistoricalTimeline.tsx

92 lines

'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Calendar } from 'lucide-react'
import type { HistoricalEvent } from '@/types/swot'

interface HistoricalTimelineProps {
  events: HistoricalEvent[]
}

export function HistoricalTimeline({ events }: HistoricalTimelineProps) {
  const getImpactColor = (impact: 'positive' | 'negative' | 'neutral') => {
    switch (impact) {
      case 'positive':
        return 'bg-green-500'
      case 'negative':
        return 'bg-red-500'
      case 'neutral':
        return 'bg-gray-500'
    }
  }

  const getImpactBadge = (impact: 'positive' | 'negative' | 'neutral') => {
    switch (impact) {
      case 'positive':
        return 'success'
      case 'negative':
        return 'destructive'
      case 'neutral':
        return 'secondary'
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Calendar className="h-5 w-5" />
          Historical Timeline
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="relative">
          {/* Timeline line */}
          <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-border" />

          {/* Events */}
          <div className="space-y-6">
            {events
              .sort((a, b) => b.year - a.year)
              .map((event, index) => (
                <div key={index} className="relative pl-10">
                  {/* Timeline dot */}
                  <div
                    className={`absolute left-2.5 w-3 h-3 rounded-full ${getImpactColor(
                      event.economicImpact
                    )}`}
                  />

                  {/* Event card */}
                  <div className="bg-muted/50 rounded-lg p-4">
                    <div className="flex items-start justify-between mb-2">
                      <div>
                        <div className="font-bold text-lg">{event.year}</div>
                        <h4 className="font-semibold">{event.title}</h4>
                      </div>
                      <div className="flex gap-2">
                        <Badge variant={getImpactBadge(event.economicImpact)}>
                          {event.economicImpact}
                        </Badge>
                        {event.relevance >= 80 && (
                          <Badge variant="outline">High Relevance</Badge>
                        )}
                      </div>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {event.description}
                    </p>
                    <div className="mt-2 text-xs text-muted-foreground">
                      Relevance to current analysis: {event.relevance}%
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}