'use client';

import clsx from 'clsx';
import React, { useState } from 'react';

import { getRandomAuraURL } from '@/utils/utils';

export type SidebarCarouselConfig<K extends PropertyKey = string> = {
  id?: string;
  slides: Record<K, React.ReactNode>;
  slideOrder: K[];
  defaultSlide?: K;
};

export type Props = React.HTMLAttributes<HTMLDivElement> & {
  backgroundImage?: string;
};

export const SidebarAura: React.FC<Props> = (props) => {
  const {
    backgroundImage: explicitBackgroundImage,
    style: explicitStyle,
    children,
    ...restProps
  } = props;
  const [randomBackgroundImage] = useState(getRandomAuraURL());
  const backgroundImage = explicitBackgroundImage || randomBackgroundImage;
  return (
    <div
      {...restProps}
      style={
        backgroundImage
          ? ({
              '--background-image': `url('${backgroundImage}')`,
              ...explicitStyle,
            } as React.CSSProperties)
          : explicitStyle
      }
    >
      <div
        className={clsx(
          'absolute inset-0',
          'before:absolute before:inset-0 before:bg-(image:--background-image) before:bg-cover before:bg-top before:opacity-70',
          'after:absolute after:inset-x-0 after:top-[32px] after:bottom-0 after:bg-linear-to-t after:from-tertiary after:via-tertiary after:via-50%'
        )}
      />
      {children}
    </div>
  );
};

export default SidebarAura;