import React from 'react';
import type { ProfileStyle } from '@backspace/shared/src/profile';
import { bannerImageStyle, themeGradient } from '../../utils/profileStyle';
import { ProfileEffectLayer } from './ProfileEffectLayer';

interface ProfileBannerProps {
  src: string | null;
  style: ProfileStyle;
  /** Gradient used when there is no image and no theme. */
  fallback: string;
  className?: string;
  effectDensity?: number;
  children?: React.ReactNode;
}

/**
 * The banner strip: image (framed by the user's crop), theme gradient, or the
 * identity gradient — in that order — with the profile effect over it.
 */
export function ProfileBanner({ src, style, fallback, className = '', effectDensity = 1, children }: ProfileBannerProps) {
  const theme = themeGradient(style);
  return (
    <div className={`relative overflow-hidden ${className}`} style={src ? undefined : { background: theme ?? fallback }}>
      {src && (
        <img
          src={src}
          alt=""
          draggable={false}
          className="absolute inset-0 w-full h-full object-cover select-none"
          style={bannerImageStyle(style.banner)}
        />
      )}
      <ProfileEffectLayer effect={style.effect} density={effectDensity} />
      {children}
    </div>
  );
}