'use client';

import { useTenant } from '@/contexts/tenant-context';
import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { useRouter } from 'next/navigation';

export default function SelectClubPage() {
  const { clubs, setActiveClub } = useTenant();
  const router = useRouter();

  const handleClubSelect = (clubId: string) => {
    setActiveClub(clubId);
    router.push('/dashboard');
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-50 p-6">
      <div className="max-w-4xl w-full">
        <h1 className="text-2xl font-bold mb-6 text-center">Select Your Club</h1>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {clubs.map((club) => (
            <Card 
              key={club.id} 
              className="cursor-pointer hover:shadow-lg transition-shadow"
              onClick={() => handleClubSelect(club.id)}
            >
              <CardHeader>
                <CardTitle>{club.name}</CardTitle>
                <CardDescription>{club.sportType}</CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}
