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

export function PageHeader({ title, description, actions }: { title: string; description: string; actions?: ReactNode }) {
  return (
    <div className="vp-page-header">
      <div>
        <Typography.Title heading={3} style={{ margin: 0 }}>
          {title}
        </Typography.Title>
        <Typography.Text type="tertiary">{description}</Typography.Text>
      </div>
      {actions ? <div className="vp-page-header-actions">{actions}</div> : null}
    </div>
  );
}
