laconic-deploy/packages/frontend/src/components/layout/screen-header/Header.tsx

import { cn } from '@/lib/utils';
import { ReactNode } from 'react';

/**
 * HeaderProps interface defines the props for the Header component.
 */
interface HeaderProps {
  /**
   * The title of the header.
   */
  title: string;
  /**
   * The subtitle of the header.
   */
  subtitle?: string;
  /**
   * An array of actions to display in the header.
   */
  actions?: ReactNode[];
  /**
   * A back button to display in the header.
   */
  backButton?: ReactNode;
  /**
   * Optional CSS class names to apply to the header.
   */
  className?: string;
  /**
   * The layout of the header.
   * @default 'default'
   */
  layout?: 'default' | 'compact';
}

/**
 * A component that renders a header with a title, subtitle, actions, and back button.
 *
 * @param {HeaderProps} props - The props for the component.
 * @returns {React.ReactElement} A div element containing the header content.
 */
export function Header({
  title,
  subtitle,
  actions,
  backButton,
  className,
  layout = 'default',
}: HeaderProps) {
  return (
    <div
      className={cn(
        'flex flex-col sm:flex-row sm:items-center sm:justify-between',
        layout === 'compact' ? 'mb-2' : 'mb-4',
        className,
      )}
    >
      <div className="flex items-center gap-2">
        {backButton}
        <div>
          <h1
            className={cn(
              'font-bold',
              layout === 'compact'
                ? 'text-lg sm:text-xl'
                : 'text-xl sm:text-3xl',
            )}
          >
            {title}
          </h1>
          {subtitle && (
            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
          )}
        </div>
      </div>
      {actions && actions.length > 0 && (
        <div
          className={cn(
            'flex items-center gap-2',
            layout === 'default' ? 'mt-4 sm:mt-0' : 'mt-2 sm:mt-0',
          )}
        >
          {actions.map((action, index) => (
            <div key={index}>{action}</div>
          ))}
        </div>
      )}
    </div>
  );
}