import { useState } from 'react'
import { Link } from 'react-router-dom'
import { ChevronLeft } from 'lucide-react'
import HeaderTitle from './HeaderTitle'
import cookies from '../assets/images/cookies.png'
import flatLay from '../assets/images/FlatLay.png'
import './OffersHours.css'

const OFFER_CATEGORIES = [
  {
    title: 'شیرینی',
    description:
      'شیرینی‌های بلوط همیشه تازه، خوش‌طعم و باکیفیت تهیه می‌شوند 🌰 از مدل‌های ساده برای دورهمی‌های خانوادگی تا شیرینی‌های شیک و مجلسی، همه با بهترین مواد اولیه آماده می‌شوند تا کنار هر فنجان چای و هر جشن، لحظه‌هایتان شیرین‌تر شود.',
  },
  { title: 'كيكی جات' },
  { title: 'شیرینی تر' },
  { title: 'شیرینی خشک' },
  { title: 'زولبیا و بامیه' },
  { title: 'کیک شکلاتی' },
  { title: 'کیک' },
  { title: 'وسایل تم تولد' },
  { title: 'سوهان' },
  { title: 'آجیل و شکلات' },
  { title: 'دسر ها' },
  { title: 'شیرینی ها' },
  { title: 'کیک های خامه ای' },
]

type OffersHoursProps = {
  showOffers?: boolean
  className?: string
}

export default function OffersHours({ showOffers = true, className = '' }: OffersHoursProps) {
  const [openOffer, setOpenOffer] = useState(0)

  return (
    <div className={`offers-hours ${className}`.trim()}>
      <section className={`offers-wrapper${showOffers ? '' : ' offers-wrapper--hours-only'}`}>
        {showOffers && (
          <>
            <div className="offers-wrapper__img">
              <img src={cookies} alt="کوکی" />
            </div>

            <HeaderTitle
              placeholder="Special Menu Offers"
              secondary="پیشنهاد ویژه"
              primary="مارو از دست ندید!"
              size="lg"
              align="center"
              className="offers-wrapper__title"
            />

            <div className="offers">
              {OFFER_CATEGORIES.map((cat, index) => {
                const isOpen = openOffer === index
                return (
                  <div key={cat.title} className="offers__item">
                    <button
                      type="button"
                      className={`offers__trigger${isOpen ? ' offers__trigger--open' : ''}`}
                      onClick={() => setOpenOffer(isOpen ? -1 : index)}
                    >
                      <span className="star">✱</span>
                      <span>{cat.title}</span>
                    </button>
                    {isOpen && cat.description && (
                      <div className="offers__body">
                        <p className="offers__description">{cat.description}</p>
                        <div className="offers__cta">
                          <Link to="/products" className="btn-primary">
                            مشاهده محصولات
                            <ChevronLeft size={14} />
                          </Link>
                        </div>
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          </>
        )}

        <div className={`semicolon${showOffers ? '' : ' semicolon--solo'}`}>
          <img src={flatLay} alt="" />
        </div>

        <HeaderTitle
          placeholder="Working Hours"
          secondary="ساعت کاری"
          primary="کافه نان و شیرینی بلوط"
          size="lg"
          align="center"
        />

        <div className="hours">
          <div>
            <span className="star">✱</span>
            شنبه تا پنجشنبه <span className="hours__number">۸</span> صبـــــــــح /{' '}
            <span className="hours__number">۱۲</span> شـــــــــــب
          </div>
          <div>
            <span className="star">✱</span>
            جمعه و تعطیلات <span className="hours__number">۹</span> صبـــــــــح /{' '}
            <span className="hours__number">۱۲</span> شـــــــــــب
          </div>
        </div>
      </section>
    </div>
  )
}
