'use client';

import React from 'react';

function Background({ imageUrl }: { imageUrl: string }) {
  if (!imageUrl) {
    return null;
  }

  return (
    <div className="bg-background-default absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
      <div className="absolute top-0 bottom-0 left-1/2 max-w-[752px] w-full -translate-x-1/2">
        {imageUrl && (
          <img
            src={imageUrl}
            alt="Background"
            className="pointer-events-none h-full w-full object-cover"
            width={720}
            height={1280}
            style={{ objectPosition: 'center -48px' }}
          />
        )}
        <div
          className="absolute top-0 bottom-0 left-0 w-[40%]"
          style={{
            background: 'linear-gradient(to right, rgba(6, 3, 24, 1), transparent)',
          }}
        />
        <div
          className="absolute top-0 bottom-0 right-0 w-[40%]"
          style={{
            background: 'linear-gradient(to left, rgba(6, 3, 24, 1), transparent)',
          }}
        />
        <div
          className="absolute bottom-0 h-60 w-full"
          style={{
            background: 'linear-gradient(to top, rgba(6, 3, 24, 1), transparent)',
          }}
        ></div>
      </div>
    </div>
  );
}
export default React.memo(Background);
