folx-tv/client/src/components/news-widget.tsx

import { useQuery } from "@tanstack/react-query";
import { useState, useEffect, useCallback } from "react";
import { Newspaper, ExternalLink } from "lucide-react";

interface NewsItem {
  title: string;
  link: string;
  source: string;
  pubDate: string;
}

const VISIBLE_COUNT = 5;

export function NewsWidget() {
  const { data: news, isLoading } = useQuery<NewsItem[]>({
    queryKey: ["/api/news-feed"],
  });

  const [offset, setOffset] = useState(0);
  const [paused, setPaused] = useState(false);

  const items = news || [];
  const total = items.length;

  const advance = useCallback(() => {
    if (total <= VISIBLE_COUNT) return;
    setOffset((o) => (o + 1) % total);
  }, [total]);

  useEffect(() => {
    if (paused || total <= VISIBLE_COUNT) return;
    const timer = setInterval(advance, 5000);
    return () => clearInterval(timer);
  }, [paused, advance, total]);

  const visible: NewsItem[] = [];
  for (let i = 0; i < Math.min(VISIBLE_COUNT, total); i++) {
    visible.push(items[(offset + i) % total]);
  }

  return (
    <div
      className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col min-h-[320px]"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      data-testid="widget-news"
    >
      <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
        <Newspaper className="w-4 h-4 text-primary" />
        <h3 className="font-bold text-card-foreground text-sm">Musiknachrichten</h3>
      </div>
      <div className="p-3 flex-1 flex flex-col">
        {visible.map((item, i) => (
          <a
            key={`${offset}-${i}`}
            href={item.link}
            target="_blank"
            rel="noopener noreferrer"
            className="block group cursor-pointer flex-1 flex flex-col justify-center"
            data-testid={`link-news-${i}`}
          >
            <div className="flex items-start gap-2">
              <div className="flex-1 min-w-0">
                <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
                  {item.title}
                </h4>
                <div className="flex items-center gap-1.5 mt-1">
                  <span className="text-[10px] text-primary font-medium">{item.source}</span>
                  <span className="text-[10px] text-muted-foreground">{item.pubDate}</span>
                </div>
              </div>
              <ExternalLink className="w-3 h-3 text-muted-foreground flex-shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity" />
            </div>
            {i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-2" />}
          </a>
        ))}
        {isLoading && (
          <div className="space-y-3 flex-1">
            {Array.from({ length: VISIBLE_COUNT }).map((_, i) => (
              <div key={i} className="space-y-1.5">
                <div className="h-3 bg-muted animate-pulse rounded w-full" />
                <div className="h-3 bg-muted animate-pulse rounded w-3/4" />
                <div className="h-2 bg-muted animate-pulse rounded w-1/3 mt-1" />
                {i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-3" />}
              </div>
            ))}
          </div>
        )}
        {!isLoading && total === 0 && (
          <p className="text-xs text-muted-foreground text-center py-2">Keine Nachrichten verfügbar</p>
        )}
      </div>
    </div>
  );
}