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

const { Text, Title } = Typography;

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

  return (
    <header className={headerClassName}>
      <div className="v2-workspace-panel-copy">
        <Title heading={5}>{title}</Title>
        {description ? <Text 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>
  );
}
