import Link from 'next/link';

export type DetailViewMode = 'simple' | 'details';

export function AgentDetailModeToggle({
  agentId,
  mode,
}: {
  agentId: string;
  mode: DetailViewMode;
}) {
  return (
    <div className="agent-detail-mode-toggle" role="group" aria-label="View mode">
      <Link
        href={`/agents/${agentId}`}
        className={`agent-detail-mode-link ${mode === 'simple' ? 'is-active' : ''}`}
        aria-current={mode === 'simple' ? 'page' : undefined}
      >
        Simple
      </Link>
      <Link
        href={`/agents/${agentId}?view=details`}
        className={`agent-detail-mode-link ${mode === 'details' ? 'is-active' : ''}`}
        aria-current={mode === 'details' ? 'page' : undefined}
      >
        Details
      </Link>
    </div>
  );
}
