import { Activity, Trophy, Medal, UserPlus, Heart, Flag, Play } from 'lucide-react';
import Button from '@/components/ui/Button';
import Link from 'next/link';
import { timeAgo } from '@/lib/utilities/time';
import { DashboardFeedItemSummaryViewModel } from '@/lib/view-models/DashboardOverviewViewModel';

function FeedItemRow({ item }: { item: DashboardFeedItemSummaryViewModel }) {
  const getActivityIcon = (type: string) => {
    if (type.includes('win')) return { icon: Trophy, color: 'text-yellow-400 bg-yellow-400/10' };
    if (type.includes('podium')) return { icon: Medal, color: 'text-warning-amber bg-warning-amber/10' };
    if (type.includes('join')) return { icon: UserPlus, color: 'text-performance-green bg-performance-green/10' };
    if (type.includes('friend')) return { icon: Heart, color: 'text-pink-400 bg-pink-400/10' };
    if (type.includes('league')) return { icon: Flag, color: 'text-primary-blue bg-primary-blue/10' };
    if (type.includes('race')) return { icon: Play, color: 'text-red-400 bg-red-400/10' };
    return { icon: Activity, color: 'text-gray-400 bg-gray-400/10' };
  };

  const { icon: Icon, color } = getActivityIcon(item.type);

  return (
    <div className="flex gap-3 p-3 rounded-lg bg-deep-graphite/50 border border-charcoal-outline">
      <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${color} flex-shrink-0`}>
        <Icon className="w-5 h-5" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm text-white">{item.headline}</p>
        {item.body && (
          <p className="text-xs text-gray-500 mt-1 line-clamp-2">{item.body}</p>
        )}
        <p className="text-xs text-gray-500 mt-1">{timeAgo(item.timestamp)}</p>
      </div>
      {item.ctaHref && (
        <Link href={item.ctaHref} className="flex-shrink-0">
          <Button variant="secondary" className="text-xs px-3 py-1.5">
            {item.ctaLabel || 'View'}
          </Button>
        </Link>
      )}
    </div>
  );
}

export { FeedItemRow };