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

const { Text, Title } = Typography;

export type WorkspacePanelTone = 'neutral' | 'primary' | 'warning' | 'authority' | 'health' | 'danger';

export function WorkspacePanelHeader({
  title,
  description,
  eyebrow,
  meta,
  actions,
  variant = 'default',
  tone = 'neutral',
  className = '',
  actionsClassName = ''
}: {
  title: ReactNode;
  description?: ReactNode;
  eyebrow?: ReactNode;
  meta?: ReactNode;
  actions?: ReactNode;
  variant?: 'default' | 'compact' | 'inverted';
  tone?: WorkspacePanelTone;
  className?: string;
  actionsClassName?: string;
}) {
  const headerClassName = [
    'v2-workspace-panel-header',
    `is-${variant}`,
    `tone-${tone}`,
    eyebrow != null ? 'has-eyebrow' : '',
    className
  ].filter(Boolean).join(' ');
  const trailingClassName = ['v2-workspace-panel-actions', actionsClassName].filter(Boolean).join(' ');

  return (
    <header className={headerClassName}>
      <div className="v2-workspace-panel-copy">
        {eyebrow != null ? <Text className="v2-workspace-panel-eyebrow">{eyebrow}</Text> : null}
        <Title className="v2-workspace-panel-title" heading={5}>{title}</Title>
        {description ? <Text className="v2-workspace-panel-description" type="tertiary">{description}</Text> : null}
      </div>
      {meta || actions ? <div className={trailingClassName}>
        {meta ? <span className="v2-workspace-panel-meta">{meta}</span> : null}
        {actions}
      </div> : null}
    </header>
  );
}