import type { ReactNode } from 'react' import { useState } from 'react' import { sendFeedback } from '../services/feedbackService' type MagicCardProps = { articleId?: string source: string timeAgo: string sentiment: 'Positivo' | 'Negativo' | 'Neutrale' title: string summary: string tags: string[] entities: string[] } // Card notizia: mostra fonte, sentiment, testo, tag, entità e azioni rapide. function MagicCard({ articleId, source, timeAgo, sentiment, title, summary, tags, entities }: MagicCardProps) { const [voted, setVoted] = useState<1 | -1 | null>(null) const handleVote = (vote: 1 | -1) => { if (voted !== null) return setVoted(vote) if (articleId) sendFeedback(articleId, vote) } return (
{/* Testata card: fonte e badge del sentiment allineati ai lati opposti. */}

{source} • {timeAgo}

{sentiment}

{title}

{summary}

{/* Tag tematici: servono a classificare velocemente la notizia. */}
{tags.map((tag) => ( {tag} ))}
{/* Entità rilevate: evidenziano i nomi chiave citati nella notizia. */}
Entità:
{entities.map((entity) => ( {entity} ))}
{/* Azioni rapide: pulsanti iconici per interagire con la card. */}
) } // Piccolo bottone riutilizzabile per mantenere coerente il footer azioni. function ActionButton({ label, tone, children, onClick, disabled, style }: { label: string; tone: string; children: ReactNode; onClick?: () => void; disabled?: boolean; style?: React.CSSProperties }) { return ( ) } function ThumbUpIcon() { return ( ) } function ThumbDownIcon() { return ( ) } function BookmarkIcon() { return ( ) } function ShareIcon() { return ( ) } export default MagicCard