import { Trash2 } from 'lucide-react'
import { useT } from '../i18n/useT'
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) {
  const t = useT()

  return (
    <article className={styles.card}>
      <div className={styles.imageWrap}>
        <img
          src={slide.imageUrl}
          alt={slide.title ?? t('website.sliders.slideAlt')}
          className={styles.image}
          loading="lazy"
        />
      </div>

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