"use client"

export function RecentDevelopments() {
  const developments = [
    {
      id: 1,
      title: "European Registrations Plummet Despite EV Boom",
      summary:
        "Tesla registrations crashed 23% year-over-year in August across Europe to 14,831 units, while the broader European electric vehicle market surged 26%. European Automobile Manufacturers' Association data shows Tesla's eight-month European registration...",
      timeAgo: "10 hours ago",
      type: "negative",
      avatar: "🇪🇺",
    },
    {
      id: 2,
      title: "Musk Acquires Billion-Dollar Stake After Compensation Vote",
      summary:
        "CEO Elon Musk purchased $1 billion worth of Tesla stock in mid-September, marking his first such acquisition since 2020. The move follows the board's proposed compensation package potentially worth $900 billion, which could make Musk the world's first...",
      timeAgo: "4 hours ago",
      type: "positive",
      avatar: "💰",
    },
    {
      id: 3,
      title: "CFO Taneja Divests Nearly Million Shares Recently",
      summary:
        "Tesla CFO Vaibhav Taneja sold shares worth approximately $918,000 in another recent divestment, marking the latest in a series of similar transactions over the past year. The sale occurs ahead of Tesla's November 5 annual shareholder meeting.",
      timeAgo: "9 hours ago",
      type: "neutral",
      avatar: "👤",
    },
  ]

  return (
    <div className="bg-card border border-border rounded-lg p-4">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-semibold">Recent Developments</h2>
        <span className="text-sm text-muted-foreground">Updated 3 hours ago</span>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {developments.map((item) => (
          <div
            key={item.id}
            className="bg-accent/30 rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer"
          >
            <div className="flex items-start space-x-3 mb-3">
              <div className="flex-shrink-0">
                <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-sm">
                  {item.avatar}
                </div>
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center space-x-2 mb-1">
                  {item.type === "positive" && <div className="w-2 h-2 rounded-full bg-green-500"></div>}
                  {item.type === "negative" && <div className="w-2 h-2 rounded-full bg-red-500"></div>}
                  {item.type === "neutral" && <div className="w-2 h-2 rounded-full bg-gray-500"></div>}
                  <span className="text-xs text-muted-foreground">{item.timeAgo}</span>
                </div>
              </div>
            </div>

            <h3 className="font-medium text-foreground mb-3 text-sm leading-tight">{item.title}</h3>

            <p className="text-xs text-muted-foreground leading-relaxed line-clamp-4">{item.summary}</p>
          </div>
        ))}
      </div>
    </div>
  )
}