import { forwardRef } from 'react';

const RIM_SHADOWS = {
  none: [],
  subtle: ['var(--rim-light-inner)', 'var(--rim-light-outer)'],
  pronounced: ['var(--rim-light-inner)', 'var(--rim-light-outer)'],
  'ember-subtle': ['var(--rim-light-inner)', 'var(--ember-rim-subtle)'],
  'ember-pronounced': ['var(--rim-light-inner)', 'var(--ember-rim-pronounced)'],
};

const ELEVATION_SHADOWS = {
  flat: [],
  ambient: ['var(--elevation-ambient)'],
  pronounced: ['var(--elevation-pronounced)'],
};

const GlassSurface = forwardRef(function GlassSurface(
  {
    as: As = 'div',
    tint = 'mid',
    rim = 'subtle',
    elevation = 'flat',
    blur = 'mid',
    className,
    style,
    children,
    ...rest
  },
  ref
) {
  const shadowParts = [
    ...(RIM_SHADOWS[rim] ?? []),
    ...(ELEVATION_SHADOWS[elevation] ?? []),
  ];
  const composedStyle = {
    background: `var(--glass-surface-${tint})`,
    backdropFilter: `blur(var(--glass-blur-${blur})) saturate(var(--glass-saturate))`,
    WebkitBackdropFilter: `blur(var(--glass-blur-${blur})) saturate(var(--glass-saturate))`,
    boxShadow: shadowParts.length > 0 ? shadowParts.join(', ') : undefined,
    ...style,
  };

  return (
    <As ref={ref} className={className} style={composedStyle} {...rest}>
      {children}
    </As>
  );
});

export default GlassSurface;