import React, { memo } from 'react';

export const Panel = memo(function Panel({
  children,
  className,
  testid,
}: {
  children: React.ReactNode;
  className?: string;
  testid?: string;
}): JSX.Element {
  return (
    <div
      data-testid={testid}
      className={['bg-bg-hover/50 rounded-md p-3', className]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </div>
  );
});