import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export function News() {
  const newsItems = [
    {
      title:
        "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest",
      source: "CNN",
    },
    {
      title:
        "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?",
      source: "CBS Sports",
    },
    {
      title: "China's Baidu reports 15% revenue growth, beating expectations",
      source: "CNBC",
    },
  ];

  return (
    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
      <CardHeader>
        <CardTitle>News</CardTitle>
      </CardHeader>
      <CardContent>
        <div className='space-y-4'>
          {newsItems.map((item, i) => (
            <div key={i} className='space-y-1'>
              <h3 className='font-medium'>{item.title}</h3>
              <p className='text-sm text-gray-500'>{item.source}</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
