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

export default function HomePage() {
  const { slug } = useParams();
  const stats = usePollStats(slug!);
  return (
    <Page title={`Event: ${slug}`}>
      <Card>
        <CardContent className="p-3 text-sm">
          {stats.loading ? 'Lade…' : (
            <span>
              <span className="font-medium">{stats.onlineGuests}</span> Gäste online · ✅{' '}
              <span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
            </span>
          )}
        </CardContent>
      </Card>
      <div className="h-3" />
      <div className="flex flex-wrap gap-2">
        <Link to="tasks"><Button variant="secondary">Aufgabe ziehen</Button></Link>
        <Link to="tasks"><Button variant="secondary">Wie fühlst du dich?</Button></Link>
        <Link to="upload"><Button>Einfach ein Foto machen</Button></Link>
      </div>
      <div className="h-4" />
      <GalleryPreview slug={slug!} />
    </Page>
  );
}