import { Trash2 } from 'lucide-react'
import type { WebsiteSliderSlide } from '../types/websiteSlider'
import { Tooltip } from './Tooltip'
import styles from './WebsiteSliderSlideCard.module.css'

interface WebsiteSliderSlideCardProps {
  slide: WebsiteSliderSlide
  onRemove: () => void
}

export function WebsiteSliderSlideCard({ slide, onRemove }: WebsiteSliderSlideCardProps) {
  return (
    <article className={styles.card}>
      <div className={styles.imageWrap}>
        <img src={slide.imageUrl} alt={slide.title ?? 'Slider slide'} className={styles.image} loading="lazy" />
      </div>

      <div className={styles.footer}>
        <p className={styles.title}>{slide.title?.trim() || 'Untitled slide'}</p>
        <Tooltip label="Remove slide">
          <button
            type="button"
            className={styles.removeBtn}
            onClick={onRemove}
            aria-label="Remove slide"
          >
            <Trash2 size={16} />
          </button>
        </Tooltip>
      </div>
    </article>
  )
}
