import { css, html } from 'lit'
import { UsBaseElement } from '../base/UsBaseElement'
import { customElementIfNotExist } from '../../utils/customElementIfNotExist'
import UsCarouselItem_css from './carouselitem.pcss'

declare global {
  interface HTMLElementTagNameMap {
    'us-carousel-item': UsCarouselItem
  }
}

@customElementIfNotExist('us-carousel-item')
export class UsCarouselItem extends UsBaseElement {
  static styles = [
    UsBaseElement.styles,
    css([UsCarouselItem_css] as TemplateStringsArray | any),
  ]

  render() {
    return html`
      <div class='carousel-slider'>
        <slot></slot>
      </div>
    `
  }
}