import React, { useCallback } from 'react';
import { Organization, LiveActivity as LiveActivityType } from '@/types.ts';
import { useTranslation } from '@/hooks/useI18n.tsx';

type ActivityWithOrg = LiveActivityType & { org: Organization };

interface ActivityItemProps {
  activity: ActivityWithOrg;
  onViewOrganization: (org: Organization) => void;
  isLastItem: boolean;
}

const ActivityItem: React.FC<ActivityItemProps> = ({
  activity,
  onViewOrganization,
  isLastItem,
}) => {
  const { t } = useTranslation();

  const handleClick = useCallback(() => {
    onViewOrganization(activity.org);
  }, [onViewOrganization, activity.org]);

  return (
    <div className="relative pl-16 py-4">
      {!isLastItem && (
        <span className="absolute left-6 top-6 -ml-px h-full w-0.5 bg-border" aria-hidden="true" />
      )}
      <div className="relative flex items-center gap-4">
        <div className="absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-12 w-12 flex-none items-center justify-center rounded-full bg-background ring-2">
          {React.cloneElement(activity.icon, { className: 'h-6 w-6 text-primary' })}
        </div>
        <div
          onClick={handleClick}
          className="flex-auto rounded-lg p-4 cursor-pointer bg-background/50 border border-transparent hover:bg-background transition-all shadow-sm hover:shadow-lg"
        >
          <p className="text-base text-foreground">
            <span className="font-semibold">{activity.org.name}</span> {t(activity.actionKey)}{' '}
            {activity.subjectKey && <span className="font-semibold">{t(activity.subjectKey)}</span>}
          </p>
          <p className="text-sm text-muted-foreground">
            {t(activity.timeKey, { count: activity.timeValue })}
          </p>
        </div>
      </div>
    </div>
  );
};

export default React.memo(ActivityItem);