import React from 'react';
import { BoxDivProps, SilkeBox } from '../silke-box';
import { useImageColors } from '../../hooks/image-colors/use-image-colors';
import styles from './silke-image-color-backdrop.scss';

type SilkeImageColorBackdropProps = { src: string } & BoxDivProps;

export function SilkeImageColorBackdrop({
  src,
  children,
  className,
  ...rest
}: SilkeImageColorBackdropProps) {
  const palette = useImageColors(src);
  let cl = styles.root;
  if (className) cl += ' ' + className;
  return (
    <SilkeBox
      className={cl}
      bg="neutral-5"
      style={
        {
          '--color-1': palette?.LightVibrant,
          '--color-2': palette?.LightVibrant,
        } as any
      }
      {...rest}
    >
      {children}
    </SilkeBox>
  );
}