import * as stylex from '@stylexjs/stylex';

import type { PageBackgroundProps } from './types';

import { DEFAULT_IMAGE_QUALITY } from '~/src/lib/toSizedImageUrlNext';
import { pageBackgroundStyles } from './styles';

export const PageBackground = ({ imageUrl }: PageBackgroundProps) => {
  const backgroundImageUrl = imageUrl
    ? `https://songwhip.com/cdn-cgi/image/quality=${DEFAULT_IMAGE_QUALITY},width=${2400},format=jpeg/${imageUrl}`
    : undefined;

  return (
    <div
      {...stylex.props(pageBackgroundStyles.base)}
      style={{ backgroundImage: `url(${backgroundImageUrl})` }}
    />
  );
};