import React from "react";

import { getClassName } from "../../utils";

import "./Item.css";
function CarouselItem({
  src,
  blur = true,
  srcBlur,
  children,
  ...props
}: {
  [x: string]: any;
}) {
  return (
    <div {...props} className={getClassName(`CarouselItem`, props.className)}>
      {blur &&
        (srcBlur ? (
          <div
            className="MYUI-CarouselItem__in--custom"
            style={{
              background: `url(${srcBlur})`,
            }}
          ></div>
        ) : (
          <div
            className="MYUI-CarouselItem__in"
            style={{
              background: `url(${src})`,
            }}
          ></div>
        ))}
      <div className="MYUI-CarouselItem__image">
        <img src={src} />
      </div>
      {children && (
        <div className="MYUI-CarouselItem__content">
          <div className="MYUI-CarouselItem__children">{children}</div>
        </div>
      )}
    </div>
  );
}

export default CarouselItem;

/*
{children && (
          <div className="MYUI-CarouselItem__content">
            <div className="MYUI-CarouselItem__children">{children}</div>
          </div>
        )}
*/