import { Activity, ArrowRight } from "lucide-react";
import { useTranslation } from "react-i18next";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";

interface ActivityItem {
  id: string | number;
  title: string;
  subtitle: string;
  timestampLabel: string;
  distanceLabel: string;
  onFocus: () => void;
}

interface ActivityPanelProps {
  items: ActivityItem[];
  emptyMessage: string;
}

export function ActivityPanel({ items, emptyMessage }: ActivityPanelProps) {
  const { t } = useTranslation();

  return (
    <Card className="h-full">
      <CardHeader className="space-y-1">
        <CardTitle className="flex items-center gap-2">
          <Activity className="h-5 w-5 text-primary" />
          {t("activity.title")}
        </CardTitle>
        <CardDescription>{t("activity.description")}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {items.length === 0 && <p className="text-sm text-muted-foreground">{emptyMessage}</p>}
        {items.length > 0 && (
          <ScrollArea className="max-h-[280px] pr-2">
            <ul className="space-y-3">
              {items.map(item => (
                <li key={item.id} className="rounded-xl border border-border/60 bg-muted/50 p-3">
                  <div className="flex items-center justify-between gap-3">
                    <div className="flex flex-col">
                      <span className="text-sm font-medium text-foreground">{item.title}</span>
                      <span className="text-xs text-muted-foreground">{item.subtitle}</span>
                    </div>
                    <Badge variant="outline" className="border-border/60 text-[10px] uppercase text-muted-foreground">
                      {item.timestampLabel}
                    </Badge>
                  </div>
                  <div className="mt-2 flex items-center justify-between text-xs text-muted-foreground">
                    <span>{item.distanceLabel}</span>
                    <Button variant="ghost" size="sm" className="h-8 gap-2 text-xs" onClick={item.onFocus}>
                      {t("activity.view")}
                      <ArrowRight className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </li>
              ))}
            </ul>
          </ScrollArea>
        )}
      </CardContent>
    </Card>
  );
}
