marketing-app/client/src/components/ArtefactVersionTimeline.jsx

import { Check, Clock, User } from 'lucide-react'

export default function ArtefactVersionTimeline({ versions, activeVersionId, onSelectVersion, artefactType }) {
  if (!versions || versions.length === 0) {
    return (
      <div className="text-center py-4 text-sm text-text-tertiary">
        No versions found
      </div>
    )
  }

  return (
    <div className="space-y-2">
      {versions.map((version, idx) => {
        const isActive = version.Id === activeVersionId
        const isLatest = idx === versions.length - 1

        return (
          <button
            key={version.Id}
            onClick={() => onSelectVersion(version)}
            className={`w-full text-start p-3 rounded-lg border transition-colors ${
              isActive
                ? 'border-brand-primary bg-brand-primary/5'
                : 'border-border hover:border-brand-primary/30 bg-surface hover:shadow-sm'
            }`}
          >
            <div className="flex items-start gap-3">
              {/* Version indicator */}
              <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold ${
                isActive 
                  ? 'bg-brand-primary text-white' 
                  : 'bg-surface-secondary text-text-secondary'
              }`}>
                v{version.version_number}
              </div>

              {/* Version details */}
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-1">
                  <span className={`text-sm font-medium ${isActive ? 'text-brand-primary' : 'text-text-primary'}`}>
                    Version {version.version_number}
                  </span>
                  {isLatest && (
                    <span className="text-xs px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full font-medium">
                      Latest
                    </span>
                  )}
                </div>

                {version.notes && (
                  <p className="text-xs text-text-secondary line-clamp-2 mb-2">
                    {version.notes}
                  </p>
                )}

                <div className="flex items-center gap-3 text-xs text-text-tertiary">
                  {version.creator_name && (
                    <div className="flex items-center gap-1">
                      <User className="w-3 h-3" />
                      <span>{version.creator_name}</span>
                    </div>
                  )}
                  {version.created_at && (
                    <div className="flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      <span>{new Date(version.created_at).toLocaleDateString()}</span>
                    </div>
                  )}
                </div>
              </div>

              {/* Active indicator */}
              {isActive && (
                <div className="flex-shrink-0">
                  <Check className="w-5 h-5 text-brand-primary" />
                </div>
              )}
            </div>

            {/* Thumbnail for image artefacts */}
            {artefactType === 'design' && version.thumbnail && (
              <div className="mt-2 ms-11">
                <img
                  src={version.thumbnail}
                  alt={`Version ${version.version_number}`}
                  className="w-full h-20 object-cover rounded border border-border"
                  loading="lazy"
                />
              </div>
            )}
          </button>
        )
      })}
    </div>
  )
}