/**
 * ProjectDetailView — sidebar (collaborators + versions).
 */
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Users, History } from 'lucide-react';

export function ProjectDetailViewSidebar() {
  return (
    <div className="space-y-6">
      <Card variant="glass">
        <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
          <Users className="w-4 h-4 text-kodo-gold" /> Collaborators
        </h3>
        <div className="flex -space-x-4 mb-4">
          <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-steel" />
          <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-steel" />
          <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-ink flex items-center justify-center text-xs text-kodo-content-dim font-bold">
            +2
          </div>
        </div>
        <Button
          variant="ghost"
          size="sm"
          className="w-full text-xs border border-kodo-steel"
        >
          Manage Team
        </Button>
      </Card>

      <Card variant="default">
        <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
          <History className="w-4 h-4 text-kodo-magenta" /> Versions
        </h3>
        <div className="space-y-2">
          <div className="flex justify-between items-center text-sm p-2 bg-white/5 rounded">
            <span className="text-white">v1.4 (Current)</span>
            <span className="text-xs text-kodo-content-dim">2h ago</span>
          </div>
          <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-kodo-content-dim">
            <span>v1.3</span>
            <span className="text-xs text-kodo-content-dim">1d ago</span>
          </div>
          <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-kodo-content-dim">
            <span>v1.2</span>
            <span className="text-xs text-kodo-content-dim">3d ago</span>
          </div>
        </div>
      </Card>
    </div>
  );
}
