import React from 'react';

const MaterialTable = ({ 
  children, 
  className = '',
  style = {} 
}) => {
  return (
    <div 
      className={`material-table ${className}`}
      style={{ 
        background: 'white', 
        borderRadius: '12px', 
        overflow: 'hidden',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
        ...style
      }}
    >
      {children}
    </div>
  );
};

const MaterialTableHeader = ({ 
  children, 
  gridColumns,
  className = '' 
}) => {
  return (
    <div 
      className={`material-table-header ${className}`}
      style={{
        display: 'grid',
        gridTemplateColumns: gridColumns,
        gap: '16px',
        padding: '16px',
        background: '#f8fafc',
        borderBottom: '1px solid #e2e8f0',
        fontSize: '14px',
        fontWeight: '600',
        color: '#374151'
      }}
    >
      {children}
    </div>
  );
};

const MaterialTableBody = ({ 
  children, 
  maxHeight = '600px',
  className = '' 
}) => {
  return (
    <div 
      className={`material-table-body ${className}`}
      style={{ 
        maxHeight, 
        overflowY: 'auto' 
      }}
    >
      {children}
    </div>
  );
};

const MaterialTableRow = ({ 
  children, 
  gridColumns,
  isSelected = false,
  isPurchased = false,
  isLast = false,
  onClick,
  className = '' 
}) => {
  return (
    <div
      className={`material-table-row ${className}`}
      onClick={onClick}
      style={{
        display: 'grid',
        gridTemplateColumns: gridColumns,
        gap: '16px',
        padding: '16px',
        borderBottom: !isLast ? '1px solid #f1f5f9' : 'none',
        background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
        transition: 'background 0.15s ease',
        cursor: onClick ? 'pointer' : 'default'
      }}
      onMouseEnter={(e) => {
        if (!isSelected && !isPurchased && !onClick) {
          e.target.style.background = '#f8fafc';
        }
      }}
      onMouseLeave={(e) => {
        if (!isSelected && !isPurchased && !onClick) {
          e.target.style.background = 'white';
        }
      }}
    >
      {children}
    </div>
  );
};

const MaterialTableCell = ({ 
  children, 
  align = 'left',
  fontWeight = 'normal',
  color = '#1f2937',
  className = '' 
}) => {
  return (
    <div 
      className={`material-table-cell ${className}`}
      style={{ 
        fontSize: '14px', 
        color, 
        fontWeight,
        textAlign: align 
      }}
    >
      {children}
    </div>
  );
};

const MaterialTableEmpty = ({ 
  icon = '📦',
  title = 'No Materials Found',
  message = 'No materials available',
  className = '' 
}) => {
  return (
    <div 
      className={`material-table-empty ${className}`}
      style={{
        textAlign: 'center',
        padding: '60px 20px',
        color: '#64748b'
      }}
    >
      <div style={{ fontSize: '48px', marginBottom: '16px' }}>{icon}</div>
      <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
        {title}
      </div>
      <div style={{ fontSize: '14px' }}>
        {message}
      </div>
    </div>
  );
};

// 복합 컴포넌트로 export
MaterialTable.Header = MaterialTableHeader;
MaterialTable.Body = MaterialTableBody;
MaterialTable.Row = MaterialTableRow;
MaterialTable.Cell = MaterialTableCell;
MaterialTable.Empty = MaterialTableEmpty;

export default MaterialTable;
