import { Tag, Typography } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';

const { Text, Title } = Typography;

export function WorkspaceCommandBar({
  title,
  description,
  status,
  statusColor = 'blue',
  meta,
  actions,
  className = '',
  ariaLabel
}: {
  title: ReactNode;
  description: ReactNode;
  status?: string;
  statusColor?: React.ComponentProps<typeof Tag>['color'];
  meta?: ReactNode;
  actions?: ReactNode;
  className?: string;
  ariaLabel?: string;
}) {
  const rootClassName = ['v2-workspace-command-bar', className].filter(Boolean).join(' ');

  return (
    <header className={rootClassName} aria-label={ariaLabel}>
      <div className="v2-workspace-command-copy">
        <Title heading={5}>{title}</Title>
        <Text type="tertiary">{description}</Text>
      </div>
      {status || meta || actions ? <div className="v2-workspace-command-actions">
        {status ? <Tag color={statusColor} type="light" size="small">{status}</Tag> : null}
        {meta ? <span className="v2-workspace-command-meta">{meta}</span> : null}
        {actions}
      </div> : null}
    </header>
  );
}
