import { NewsTickerItem } from '../../dashboard.type';

const NewsItem = ({ item }: { item: NewsTickerItem }) => {
  return (
    <a
      target="_blank"
      rel="noopener noreferrer"
      key={item.id}
      href={item.href || '#'}
      className="text-white/90 hover:text-white text-xs sm:text-sm md:text-base py-2 sm:py-3 transition-colors flex items-center gap-1.5 sm:gap-2"
    >
      <span className={`w-1.5 bg-red-400 h-1.5 sm:w-2 sm:h-2  rounded-full shrink-0`}></span>
      {item.shortText ? (
        <>
          <span className="hidden sm:inline">{item.text}</span>
          <span className="sm:hidden">{item.shortText}</span>
        </>
      ) : (
        <span>{item.text}</span>
      )}
    </a>
  );
};

export default NewsItem;