'use client'import React from 'react';import { Newspaper, Rss, ArrowRight } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface NewsItem {  title: string;  time: string;  sentiment: string;}interface NewsFeedCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  topStoriesLabel?: string;  sentimentLabel?: string;  data?: NewsItem[];}const DEFAULT_TITLE = "Market News";const DEFAULT_TOP_STORIES_LABEL = "Top Stories";const DEFAULT_SENTIMENT_LABEL = "Bullish Sentiment";const DEFAULT_DATA: NewsItem[] = [  { title: 'Fed keeps rates steady', time: '1h', sentiment: 'neutral' },  { title: 'Tech sector rally continues', time: '3h', sentiment: 'positive' },  { title: 'Oil prices dip below $80', time: '5h', sentiment: 'mixed' },];export const NewsFeedCard: React.FC<NewsFeedCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  topStoriesLabel = DEFAULT_TOP_STORIES_LABEL,  sentimentLabel = DEFAULT_SENTIMENT_LABEL,  data = DEFAULT_DATA,}) => {  const index = 50;  return (    <motion.div      layoutId={isInteractive ? `card-${index}-${title}` : undefined}      transition={{ duration: 0.4, ease: "easeOut" }}      className={cn(        "relative overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-5 shadow-sm transition-all flex flex-col h-full group",        isInteractive ? "cursor-pointer hover:border-primary/50 hover:shadow-md" : "",        className      )}    >      <div className="mb-2 flex items-start justify-between relative z-10">        <div>          <h3 className="font-semibold text-lg text-foreground">            {title}          </h3>          <div className="flex items-center gap-2 mt-1">            <span className="flex items-center gap-1.5 text-xs text-muted-foreground bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded-full border border-zinc-200 dark:border-zinc-700">              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" /> Live            </span>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <Newspaper className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="flex items-center justify-between mb-2 px-1">          <span className="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">{topStoriesLabel}</span>          <span className="text-[10px] text-emerald-600 font-medium">{sentimentLabel}</span>        </div>        <div className="space-y-2">          {data.map((item, i) => (            <div key={i} className="group cursor-pointer p-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors border border-transparent hover:border-zinc-100 dark:hover:border-zinc-700/50">              <div className="flex items-start justify-between gap-2">                <div className="text-sm font-medium text-foreground group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors line-clamp-1">                  {item.title}                </div>                {item.sentiment === 'positive' && <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shrink-0 mt-1.5" title="Positive" />}                {item.sentiment === 'neutral' && <div className="w-1.5 h-1.5 rounded-full bg-zinc-400 shrink-0 mt-1.5" title="Neutral" />}                {item.sentiment === 'mixed' && <div className="w-1.5 h-1.5 rounded-full bg-amber-500 shrink-0 mt-1.5" title="Mixed" />}              </div>              <div className="flex items-center gap-2 mt-1">                <span className="text-[10px] text-muted-foreground">{item.time} ago • Reuters</span>              </div>            </div>          ))}        </div>      </div>      <div className="z-10 mt-2 flex items-center justify-center pt-2 border-t border-border">        <button className="flex items-center gap-1 text-xs font-medium text-emerald-500 hover:underline">          View All News <ArrowRight className="w-3 h-3" />        </button>      </div>    </motion.div>  );};