import {ReactNode} from 'react';
import clsx from 'clsx';

interface SectionHelperProps {
  title?: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  color?: 'positive' | 'danger' | 'warning' | 'primary' | 'neutral';
  className?: string;
}
export function SectionHelper({
  title,
  description,
  actions,
  color = 'primary',
  className,
}: SectionHelperProps) {
  return (
    <div
      className={clsx(
        className,
        'p-10 rounded',
        color === 'positive' &&
          'bg-positive/focus border-l-positive border-l-4',
        color === 'warning' && 'bg-warning/focus border-l-warning border-l-4',
        color === 'danger' && 'bg-danger/focus border-l-danger border-l-4',
        color === 'primary' && 'bg-primary/focus border-l-primary border-l-4',
        color === 'neutral' && 'bg-paper border'
      )}
    >
      {title && <div className="text-sm mb-4 font-medium">{title}</div>}
      {description && <div className="text-sm">{description}</div>}
      {actions && <div className="mt-14">{actions}</div>}
    </div>
  );
}