// Widget Component (for dashboard widgets)
import { ReactNode } from 'react';
import { clsx } from 'clsx';
import './Widget.css';

interface WidgetProps {
  title?: string;
  children: ReactNode;
  fullWidth?: boolean;
  className?: string;
  actions?: ReactNode;
}

export default function Widget({ title, children, fullWidth = false, className, actions }: WidgetProps) {
  return (
    <div className={clsx('widget', { 'widget--full-width': fullWidth }, className)}>
      {(title || actions) && (
        <div className="widget__header">
          {title && <h2 className="widget__title">{title}</h2>}
          {actions && <div className="widget__actions">{actions}</div>}
        </div>
      )}
      <div className="widget__content">{children}</div>
    </div>
  );
}

