'use client';

import React from 'react';

type Props = {
  children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>;

function TabHeaderRendererComponent({ children, ...rest }: Props) {
  return (
    <div
      {...rest}
      className={`${rest.className} transition-all duration-200 ease-out w-full h-full flex flex-col items-center justify-center gap-2`}
    >
      {children}
    </div>
  );
}

// Memoize with shallow comparison of props
const TabHeaderRenderer = React.memo(TabHeaderRendererComponent, (prevProps, nextProps) => {
  return prevProps.className === nextProps.className && prevProps.children === nextProps.children;
});

export default TabHeaderRenderer;
