"use client"

import { TrendingUp, TrendingDown } from "lucide-react"

export function LatestPriceMovement() {
  const priceMovements = [
    {
      date: "Sep 24",
      price: "$442.79",
      change: "+4.58%",
      description:
        "Tesla shares surged 4.6% after analysts raised their estimates for Q3 deliveries, anticipating figures well above consensus, amid upgrades and bullish price targets from major Wall Street firms. Analysts cited optimism over upcoming tax credit expirations and confidence in Tesla's advancements in AI and autonomous vehicles, fueling the rally.",
      isPositive: true,
    },
    {
      date: "Sep 23",
      price: "$425.85",
      change: "-3.61%",
      description:
        "Tesla shares fell 3.8% as Federal Reserve Chair Jerome Powell's comments on high stock market valuations and cautious messaging on interest rate cuts spooked investors. Broader tech sector weakness, compounded by Tesla's stretched valuation, drove the selloff.",
      isPositive: false,
    },
    {
      date: "Sep 22",
      price: "$434.21",
      change: "+1.96%",
      description:
        "Tesla stock rallied 2% alongside a tech-led market rebound, fueled by renewed enthusiasm around AI and anticipation for Tesla's upcoming self-driving technology and robotaxi announcements. The stock neared 2025 highs as market sentiment turned bullish again after last week's volatility.",
      isPositive: true,
    },
    {
      date: "Sep 19",
      price: "$426.27",
      change: "-1.87%",
      description:
        "Tesla shares declined 1.9% as profit taking set in following a strong rebound in technology stocks earlier in the week, with little company-specific news driving the drop but general rotation out of high-momentum names.",
      isPositive: false,
    },
    {
      date: "Sep 18",
      price: "$416.88",
      change: "+2.14%",
      description:
        "Shares fell 2.2% as investors reacted to skepticism over valuation following several downgrades from analysts warning about unsustainable multiples and risks from slowing growth in key international markets, particularly China and Europe.",
      isPositive: true,
    },
    {
      date: "Sep 17",
      price: "$408.65",
      change: "+1.32%",
      description:
        "Tesla shares gained 2.2% amid a market-wide rally led by technology stocks and increased optimism about electric vehicle demand, ahead of anticipated Q3 delivery updates.",
      isPositive: true,
    },
  ]

  return (
    <div className="bg-card border border-border rounded-lg p-4">
      <h2 className="text-lg font-semibold mb-4">Latest Price Movement</h2>

      <div className="h-80 overflow-y-auto space-y-3 pr-2 scrollbar-hide">
        {priceMovements.map((movement, index) => (
          <div key={index} className="flex items-start gap-4 py-1.5">
            <div className="flex-shrink-0 w-16">
              <div className="text-sm font-medium text-muted-foreground">{movement.date}</div>
              <div className="text-sm font-medium text-foreground mt-1">{movement.price}</div>
            </div>

            <div className="flex-shrink-0">
              <div
                className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium ${
                  movement.isPositive ? "bg-green-500/20 text-green-400" : "bg-red-500/20 text-red-400"
                }`}
              >
                {movement.isPositive ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
                {movement.change}
              </div>
            </div>

            <div className="flex-1">
              <p className="text-sm text-muted-foreground leading-relaxed">{movement.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
