import React from 'react';
import Skeleton from '@/components/ui/Skeleton.tsx';

// FIX: Use React.FC to correctly type the component and allow for React's `key` prop.
const ActivityItemSkeleton: React.FC<{ isLastItem: boolean }> = ({ isLastItem }) => (
  <div className="relative pl-16 py-4">
    {!isLastItem && (
      <span className="absolute left-6 top-6 -ml-px h-full w-0.5 bg-border/50" 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">
        <Skeleton className="h-12 w-12 rounded-full" />
      </div>
      <div className="flex-auto rounded-lg p-4 bg-background/50 border border-transparent">
        <Skeleton className="h-4 w-3/4 mb-2" />
        <Skeleton className="h-3 w-1/4" />
      </div>
    </div>
  </div>
);

export default ActivityItemSkeleton;