import Image from 'next/image';
import styles from './FavoritesSection.module.css';

const favorites = [
  {
    name: 'Crispy Masala',
    subtitle: 'Classic',
    image: '/images/new.png',
    price: '12.99',
    description: 'Aromatic, soft, and tender potato masala layered inside a crispy golden crepe infused with the flavors of South Indian spices...',
    theme: 'green',
  },
  {
    name: 'South Indian Thali',
    subtitle: 'Royal',
    image: '/images/new.png',
    price: '24.99',
    description: 'A complete feast featuring an array of curries, dal, rice, breads, and desserts served traditionally on a banana leaf...',
    theme: 'yellow',
  },
  {
    name: 'Authentic Sambar',
    subtitle: 'Spicy',
    image: '/images/new.png',
    price: '8.99',
    description: 'A flavorful lentil stew made with fresh vegetables, tamarind broth, and our signature roasted spice blend...',
    theme: 'green',
  },
];

export default function FavoritesSection() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.sectionHeader}>
          {/* <p className={styles.sectionTag}>Chef&apos;s Selection</p> */}
          <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>⭐</span> Popular
          </span>
          <h2 className={styles.sectionTitle}>
            Customer <em>Favourites</em>
          </h2>
        </div>
        <div className={styles.grid}>
          {favorites.map((item, i) => (
            <div key={i} className={`${styles.card} ${styles[item.theme]}`}>
              <div className={styles.imageWrap}>
                <Image
                  src={item.image}
                  alt={item.name}
                  width={280}
                  height={200}
                  className={styles.image}
                />
              </div>
              <div className={styles.cardBody}>
                <div className={styles.labelRow}>
                  <span className={styles.subtitleTag}>{item.subtitle}</span>
                  {/* <span className={styles.price}>${item.price}</span> */}
                </div>
                <h3 className={styles.cardTitle}>{item.name}</h3>
                <p className={styles.description}>{item.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
