import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import NewsCard from './NewsCard';

const fadeUpPreset = (delay = 0, duration = 1.2) => ({
  initial: { opacity: 0, y: 20 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.2 },
  transition: { delay, duration, ease: "easeOut" }
});

function MainContent() {
  const shouldReduce = useReducedMotion();
  
  const newsItems = [
    {
      title: "Вітаємо з Різдвом Христовим!",
      date: "25.12.2023",
      category: "Новини",
      image: "https://zpep.com.ua/images/news/christmas.jpg",
      excerpt: "Дорогі українці! Від щирого серця вітаємо вас із світлим святом Різдва Христового! Нехай у кожному домі панують любов, мир і злагода, а в серці стовпиться надія та радість. Бажаємо міцного здоров'я та радості, щоб кожен день приносив щастя та натхнення! Щирих вітань!"
    },
    {
      title: "Вітаємо із професійним святом – Днем енергетика!",
      date: "22.12.2023",
      category: "Новини",
      image: "https://zpep.com.ua/images/news/energy-day.jpg",
      excerpt: "Шановні енергетики! Вітаємо вас із професійним святом! Дякуємо енергетикам України за їх професіоналізм, відданість справі та невтомну працю. Бажаємо Вам здоров'я та безпеки!"
    },
    {
      title: "ЧАС СПЛАТИТИ РАХУНКИ ЗА ЕЛЕКТРОЕНЕРГІЮ",
      date: "08.12.2023",
      category: "Послуги",
      image: "https://zpep.com.ua/images/news/payment.jpg",
      excerpt: "Шановні споживачі електричної енергії! ТОВ «Запоріжжяелектропостачання» інформує, що розрахунок за спожиту електроенергію здійснюється щомісячно до 20 числа місяця, наступного за місяцем споживання."
    },
    {
      title: "Тариф на послуги постачальника універсальних послуг ТОВ «ЗАПОРІЖЖЯЕЛЕКТРОПОСТАЧАННЯ»",
      date: "08.12.2023",
      category: "Тариф",
      image: "https://zpep.com.ua/images/news/tariff.jpg",
      excerpt: "Шановні споживачі! ТОВ «Запоріжжяелектропостачання» повідомляє актуальні тарифи на постачання електричної енергії."
    },
    {
      title: "З Днем Збройних Сил України!",
      date: "06.12.2023",
      category: "Новини",
      image: "https://zpep.com.ua/images/news/armed-forces.jpg",
      excerpt: "6 грудня Україна святкує День Збройних Сил України! Шановні захисники та захисниці України! Ви є щитом нашої держави."
    }
  ];

  if (shouldReduce) {
    return (
      <main className="flex-1">
        <div className="space-y-8">
          {newsItems.map((item, index) => (
            <NewsCard key={index} {...item} />
          ))}
        </div>
        
        <div className="flex justify-center mt-8">
          <div className="flex items-center space-x-2">
            <span className="text-sm text-gray-600">Сторінка 1 з 10</span>
            <div className="flex space-x-1">
              <button className="pagination-btn pagination-active">1</button>
              <button className="pagination-btn">2</button>
              <button className="pagination-btn">3</button>
              <button className="pagination-btn">4</button>
              <button className="pagination-btn">5</button>
              <span className="px-2">...</span>
              <button className="pagination-btn">Остання »</button>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return (
    <motion.main 
      {...fadeUpPreset(0.2, 1.0)}
      className="flex-1"
    >
      <div className="space-y-8">
        {newsItems.map((item, index) => (
          <motion.div
            key={index}
            {...fadeUpPreset(0.1 + index * 0.1, 0.8)}
          >
            <NewsCard {...item} />
          </motion.div>
        ))}
      </div>
      
      <div className="flex justify-center mt-8">
        <div className="flex items-center space-x-2">
          <span className="text-sm text-gray-600">Сторінка 1 з 10</span>
          <div className="flex space-x-1">
            <button className="pagination-btn pagination-active">1</button>
            <button className="pagination-btn">2</button>
            <button className="pagination-btn">3</button>
            <button className="pagination-btn">4</button>
            <button className="pagination-btn">5</button>
            <span className="px-2">...</span>
            <button className="pagination-btn">Остання »</button>
          </div>
        </div>
      </div>
    </motion.main>
  );
}

export default MainContent;