import type { Project } from '../lib/api';

interface ProjectPanelProps {
  project: Project | null;
  onNavigateToProject: () => void;
}

export default function ProjectPanel({ project, onNavigateToProject }: ProjectPanelProps) {
  return (
    <div className="border-b border-border-subtle shrink-0">
      <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary">
        <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
          Project
        </h3>
        <button
          title="Project Manager"
          onClick={onNavigateToProject}
          className="text-text-muted hover:text-text-primary transition-colors"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
        </button>
      </div>
      <div className="p-4 space-y-2">
        {project ? (
          <>
            <div>
              <div className="text-xs text-text-muted">Name</div>
              <div className="text-text-primary">{project.name}</div>
            </div>
            <div>
              <div className="text-xs text-text-muted">Slug</div>
              <div className="font-mono text-xs text-text-secondary">{project.slug}</div>
            </div>
          </>
        ) : (
          <div className="text-text-muted text-sm">Loading...</div>
        )}
      </div>
    </div>
  );
}
