'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';
import { FolderOpen } from 'lucide-react';
import { motion } from 'framer-motion';
import CSRHero from './components/CSRHero';
import type { CSRCardData } from './components/CSRCard';

const DUMMY_CSR: CSRCardData[] = [];

const CSRCarousel = dynamic(() => import('./components/CSRCarousel'), {
  loading: () => (
    <div className="py-20 flex justify-center">
      <div className="w-8 h-8 border-4 border-[#FFD738] border-t-transparent rounded-full animate-spin" />
    </div>
  ),
});

const CSRFeatured = dynamic(() => import('./components/CSRFeatured'), {
  loading: () => <div className="h-[600px]" />,
});

export default function CSRPage() {
  const [selectedCsr, setSelectedCsr] = useState<CSRCardData | undefined>(
    DUMMY_CSR[0]
  );
  const isEmpty = DUMMY_CSR.length === 0 || !selectedCsr;

  return (
    <div className="bg-white min-h-screen overflow-x-hidden selection:bg-[#FFD738] selection:text-[#1C1D1F] pb-32 md:pb-52">
      {/* Hero */}
      <CSRHero />

      {isEmpty ? (
        <div className="container mx-auto px-4 py-12 md:py-20 max-w-[1296px]">
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            className="flex flex-col items-center py-24 px-4 text-center bg-white border border-gray-200 rounded-[20px] shadow-sm max-w-2xl mx-auto"
          >
            <div className="w-20 h-20 bg-gray-50 border border-gray-200 rounded-full flex items-center justify-center mb-6">
              <FolderOpen className="w-10 h-10 text-gray-400" />
            </div>
            <p className="font-black text-gray-900 text-2xl tracking-tight mb-2">
              Belum Ada Kegiatan CSR
            </p>
            <p className="text-gray-600 text-sm max-w-sm">
              Saat ini belum ada program atau kegiatan CSR yang dapat
              ditampilkan.
            </p>
          </motion.div>
        </div>
      ) : (
        <>
          {/* CSR Events Carousel */}
          <CSRCarousel csrs={DUMMY_CSR} onSelectCsr={setSelectedCsr} />

          {/* Featured CSR Event */}
          <CSRFeatured csr={selectedCsr} />
        </>
      )}
    </div>
  );
}