import React from 'react';

import { CloseIcon } from '@/icons';

import { ReferenceButton } from './ReferenceButton';
import { REFERENCE_MUTED_COLOR } from './WaveformConstants';

interface ReferenceContainerProps {
  children: React.ReactNode;
  layoutClass?: string;
  className?: string;
  onRemoveReference: () => void;
}

export const ReferenceContainer: React.FC<ReferenceContainerProps> = ({
  children,
  layoutClass = 'flex items-center gap-4',
  className,
  onRemoveReference,
}) => {
  return (
    <div
      className={`${layoutClass} ${className || ''}`}
      style={{ margin: 0, padding: 0 }}
    >
      {children}

      {/* Remove button with 8px left margin - centered vertically and horizontally */}
      <div className='flex items-center justify-center'>
        <ReferenceButton
          icon={CloseIcon}
          onClick={onRemoveReference}
          style={{ color: REFERENCE_MUTED_COLOR }}
        />
      </div>
    </div>
  );
};