import NoteCard from '../NoteCard';
import { activityConfig } from './activityConfig';
import { TimelineItem as TimelineItemType } from './types';

interface Props {
    item: TimelineItemType;
    index: number;
    onPin: (id: number) => void;
    onDelete: any;
    onEdit: any;
    onView: any;
}

export default function NoteItem({ item, index, onPin, onDelete, onEdit, onView }: Props) {
    const config = activityConfig['note'];
    const creator = item.metadata?.[0]
        ? {
              name: String(item.metadata[0].value),
              avatar: undefined,
          }
        : undefined;

    return (
        <div
            key={`note-${item.id}`}
            style={{
                animation: `fadeInUp 0.4s ease-out ${index * 0.05}s both`,
            }}
        >
            <NoteCard
                id={item.id}
                title={item.title}
                content={item.description || ''}
                createdAt={item.timestamp}
                tag={config.label}
                tagColor="border-yellow-200 bg-yellow-50 text-yellow-800"
                borderTopColor={config.borderColor}
                isPinned={item.isPinned}
                onTogglePin={() => onPin(item.id)}
                onDelete={() => onDelete(item.id, item.type)}
                onEdit={() => onEdit(item.id, item.type)}
                onView={() => onView(item.id, item.type)}
                creator={creator}
            />
        </div>
    );
}