/**
 * Стеклянная панель в стиле iOS 26.
 * Переиспользуется для блоков статистики, графиков, списков.
 */

'use client';

import React from 'react';

export interface PanelProps {
  children: React.ReactNode;
  /** Дополнительный класс */
  className?: string;
  /** Включить hover-эффект (тень) */
  interactive?: boolean;
  /** Внутренние отступы. По умолчанию 24px */
  padding?: 'none' | 'sm' | 'md' | 'lg';
  style?: React.CSSProperties;
}

const paddingMap = {
  none: 0,
  sm: 16,
  md: 24,
  lg: 32,
};

export const Panel: React.FC<PanelProps> = ({
  children,
  className = '',
  interactive = false,
  padding = 'md',
  style,
}) => {
  const p = paddingMap[padding];
  return (
    <div
      className={`ios26-panel ${interactive ? 'ios26-panel-interactive' : ''} ${className}`.trim()}
      style={{
        padding: p ? `${p}px` : 0,
        ...style,
      }}
    >
      {children}
    </div>
  );
};