import React from 'react';
import { Page } from './_util';
import { useParams, Link } from 'react-router-dom';
import { usePollStats } from '../polling/usePollStats';
import { Button } from '@/components/ui/button';
import Header from '../components/Header';
import EmotionPicker from '../components/EmotionPicker';
import GalleryPreview from '../components/GalleryPreview';
import BottomNav from '../components/BottomNav';

export default function HomePage() {
  const { slug } = useParams();
  const stats = usePollStats(slug!);
  return (
    <Page title={`Event: ${slug}`}>
      <Header slug={slug!} title={`Event: ${slug}`} />
      <div className="px-4 py-6 pb-20 space-y-6"> {/* Consistent spacing */}
        {/* Prominent Draw Task Button */}
        <Link to="tasks">
          <Button className="w-full bg-gradient-to-r from-pink-500 to-pink-600 hover:from-pink-600 hover:to-pink-700 text-white py-4 rounded-xl text-base font-semibold mb-6 shadow-lg hover:shadow-xl transition-all duration-200">
            <span className="flex items-center gap-2">
              🎲 Aufgabe ziehen
            </span>
          </Button>
        </Link>

        {/* How do you feel? Section */}
        <EmotionPicker />

        <GalleryPreview slug={slug!} />
      </div>
      
      {/* Bottom Navigation */}
      <BottomNav />
    </Page>
  );
}