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

const { Text, Title } = Typography;

export type WorkspaceCommandTone = 'primary' | 'warning' | 'authority' | 'health';

export function WorkspaceCommandBar({
  title,
  description,
  eyebrow,
  icon,
  tone = 'primary',
  status,
  statusColor = 'blue',
  meta,
  actions,
  className = '',
  ariaLabel
}: {
  title: ReactNode;
  description: ReactNode;
  eyebrow?: ReactNode;
  icon?: ReactNode;
  tone?: WorkspaceCommandTone;
  status?: string;
  statusColor?: React.ComponentProps<typeof Tag>['color'];
  meta?: ReactNode;
  actions?: ReactNode;
  className?: string;
  ariaLabel?: string;
}) {
  const hasIdentity = eyebrow != null || icon != null;
  const rootClassName = [
    'v2-workspace-command-bar',
    hasIdentity ? 'has-identity' : '',
    hasIdentity ? `is-${tone}` : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <header className={rootClassName} aria-label={ariaLabel}>
      <div className="v2-workspace-command-copy">
        {hasIdentity ? <>
          <Avatar className="v2-workspace-command-icon" color="blue" size="small">{icon}</Avatar>
          <span className="v2-workspace-command-stack">
            {eyebrow ? <Text className="v2-workspace-command-eyebrow" type="tertiary">{eyebrow}</Text> : null}
            <Title className="v2-workspace-command-title" heading={5}>{title}</Title>
            <Text className="v2-workspace-command-description" type="tertiary">{description}</Text>
          </span>
        </> : <>
          <Title className="v2-workspace-command-title" heading={5}>{title}</Title>
          <Text className="v2-workspace-command-description" 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>
  );
}