dashboards/apps/business/src/components/StoreSpecialCarousel.tsx

import { ChevronLeft, ChevronRight, Pencil, Plus, Trash2 } from 'lucide-react'
import { useRef } from 'react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { StoreSpecial } from '../types/storeSpecial'
import { specialItemsToListings } from '../utils/storeSpecialListings'
import type { StoreProductListing } from '../utils/storeProductGroups'
import controlStyles from './CategoryRow.module.css'
import { StoreItemCard } from './StoreItemCard'
import { Tooltip } from './Tooltip'
import styles from './StoreSpecialCarousel.module.css'

interface StoreSpecialCarouselProps {
  special: StoreSpecial
  onAddItems: (special: StoreSpecial) => void
  onEditSpecial: (special: StoreSpecial) => void
  onDeleteSpecial: (special: StoreSpecial) => void
  onOpenListing: (listing: StoreProductListing) => void
  onEditListing: (listing: StoreProductListing) => void
  onDiscountListing: (listing: StoreProductListing) => void
  onFestivalListing: (listing: StoreProductListing) => void
  onRemoveListing: (special: StoreSpecial, listing: StoreProductListing) => void
  onAddToCart: (listing: StoreProductListing) => void
}

export function StoreSpecialCarousel({
  special,
  onAddItems,
  onEditSpecial,
  onDeleteSpecial,
  onOpenListing,
  onEditListing,
  onDiscountListing,
  onFestivalListing,
  onRemoveListing,
  onAddToCart,
}: StoreSpecialCarouselProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const trackRef = useRef<HTMLDivElement>(null)
  const listings = specialItemsToListings(special.items)

  function scrollBy(direction: -1 | 1) {
    const track = trackRef.current
    if (!track) return
    const amount = Math.max(track.clientWidth * 0.75, 240)
    track.scrollBy({ left: direction * amount, behavior: 'smooth' })
  }

  const addCard = (
    <div className={styles.cardSlot}>
      <Tooltip label={t('website.specialItems.addItemsTo', { title: special.title })}>
        <button
          type="button"
          className={styles.addCard}
          onClick={() => onAddItems(special)}
          aria-label={t('website.specialItems.addItemsTo', { title: special.title })}
        >
          <span className={styles.addIcon}>
            <Plus size={28} />
          </span>
        </button>
      </Tooltip>
    </div>
  )

  const itemCards = listings.map((listing) => (
    <div key={listing.storeItemId} className={styles.cardSlot}>
      <StoreItemCard
        listing={listing}
        onOpen={onOpenListing}
        onEdit={onEditListing}
        onDiscount={onDiscountListing}
        onFestival={onFestivalListing}
        onRemove={() => onRemoveListing(special, listing)}
        onAddToCart={onAddToCart}
        removeTooltip={t('website.specialItems.removeFromSpecial')}
      />
    </div>
  ))

  return (
    <section className={styles.section}>
      <div className={styles.header}>
        <h3 className={styles.title}>{special.title}</h3>
        <div className={styles.headerActions}>
          <Tooltip label={t('website.specialItems.editCategory')}>
            <button
              type="button"
              className={controlStyles.controlBtn}
              onClick={() => onEditSpecial(special)}
              aria-label={t('website.specialItems.editCategory')}
            >
              <Pencil size={16} />
            </button>
          </Tooltip>
          <Tooltip label={t('website.specialItems.deleteCategory')}>
            <button
              type="button"
              className={`${controlStyles.controlBtn} ${controlStyles.danger}`}
              onClick={() => onDeleteSpecial(special)}
              aria-label={t('website.specialItems.deleteCategory')}
            >
              <Trash2 size={16} />
            </button>
          </Tooltip>
          <div className={styles.navPair} dir="ltr">
            <Tooltip label={t('website.specialItems.scrollLeft')}>
              <button
                type="button"
                className={styles.navBtn}
                onClick={() => scrollBy(-1)}
                aria-label={t('website.specialItems.scrollLeft')}
              >
                <ChevronLeft size={18} />
              </button>
            </Tooltip>
            <Tooltip label={t('website.specialItems.scrollRight')}>
              <button
                type="button"
                className={styles.navBtn}
                onClick={() => scrollBy(1)}
                aria-label={t('website.specialItems.scrollRight')}
              >
                <ChevronRight size={18} />
              </button>
            </Tooltip>
          </div>
        </div>
      </div>

      <div className={styles.trackWrap}>
        <div className={styles.track} ref={trackRef} dir={isFa ? 'rtl' : 'ltr'}>
          {isFa ? (
            <>
              {addCard}
              {itemCards}
            </>
          ) : (
            <>
              {itemCards}
              {addCard}
            </>
          )}
        </div>
      </div>
    </section>
  )
}