export const LogoHexa = ({
  width = 36,
  height = 40,
  backgroundColor = '#2D5C63',
  textColor = '#ffffff',
  className = '',
  ...props
}) => {
  return (
    <div 
      className={`relative flex items-center justify-center ${className}`}
      style={{ 
        width: `${width}px`,
        height: `${height}px`,
        backgroundColor: backgroundColor,
        borderRadius: '16px',
        clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)'
      }}
      {...props}
    >
      <span 
        className="text-white font-bold text-lg"
        style={{ 
          color: textColor
        }}
      >
        H
      </span>
    </div>
  );
};

export default LogoHexa;

