import { type ComponentPropsWithoutRef, type ReactNode } from 'react';

export const Window = ({
  title,
  badge,
  children,
  ...props
}: ComponentPropsWithoutRef<'div'> & {
  title: string;
  badge?: ReactNode;
}) => (
  <div className="modern-sk-window" {...props}>
    <div className="modern-sk-titlebar">
      <span className="modern-sk-traffic r" />
      <span className="modern-sk-traffic y" />
      <span className="modern-sk-traffic g" />
      <span className="ttl">{title}</span>
      {badge && (
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          {badge}
        </div>
      )}
    </div>
    <div className="modern-sk-window-body">{children}</div>
  </div>
);