import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
import { useTranslation } from '@/hooks/useTranslation';

interface SectionHeaderProps {
  title: string;
  viewAllPath?: string;
}

function SectionHeader({ title, viewAllPath }: SectionHeaderProps) {
  const { t } = useTranslation();
  return (
    <div className="flex items-center justify-between mb-4">
      <h2 className="text-heading-3">{title}</h2>
      {viewAllPath && (
        <a
          href={viewAllPath}
          className="text-caption hover:text-foreground transition-colors"
        >
          {t('dashboard.viewAll')} →
        </a>
      )}
    </div>
  );
}

export function RecentActivityCard() {
  const { t } = useTranslation();

  return (
    <Card className="md:col-span-2" variant="glass">
      <CardHeader>
        <SectionHeader title={t('dashboard.recentActivity')} viewAllPath="/library" />
        <CardDescription>
          {t('dashboard.recentActivityDescription')}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-muted/50 transition-colors duration-[var(--duration-fast)] border border-transparent hover:border-border">
            <div className="w-2 h-2 bg-primary rounded-full shadow-status-dot-cyan animate-pulse" />
            <div className="flex-1 space-y-1">
              <p className="text-sm font-medium text-foreground">{t('dashboard.activity.newTrackAdded')}</p>
              <p className="text-xs text-muted-foreground">2 hours ago</p>
            </div>
          </div>
          <div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-muted/50 transition-colors duration-[var(--duration-fast)] border border-transparent hover:border-border">
            <div className="w-2 h-2 bg-success rounded-full shadow-status-dot-lime" />
            <div className="flex-1 space-y-1">
              <p className="text-sm font-medium text-foreground">{t('dashboard.activity.messageFrom', { user: 'alice' })}</p>
              <p className="text-xs text-muted-foreground">4 hours ago</p>
            </div>
          </div>
          <div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-muted/50 transition-colors duration-[var(--duration-fast)] border border-transparent hover:border-border">
            <div className="w-2 h-2 bg-destructive rounded-full shadow-status-dot-magenta" />
            <div className="flex-1 space-y-1">
              <p className="text-sm font-medium text-foreground">{t('dashboard.activity.newFavoriteAdded')}</p>
              <p className="text-xs text-muted-foreground">6 hours ago</p>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}