import { Utensils } from "lucide-react";
import { Button } from "../ui/button";
import { Card } from "../ui/card";

export default function BJRepas() {
  return (
    <div className="space-y-4 px-2">
      <h2 className="text-2xl font-bold">Inscription aux repas</h2>

      <Card className="space-y-4 p-6 my-6">
        <div className="flex flex-col items-center text-center space-y-4">
          <div className="rounded-full bg-muted p-3">
            <Utensils className="h-6 w-6 text-muted-foreground" />
          </div>
          
          <div className="space-y-2">
            <h3 className="text-lg font-semibold">
              L'inscription aux repas est désactivée
            </h3>
            <p className="text-muted-foreground text-sm max-w-md">
              Afin de réduire le gaspillage alimentaire à la cantine, veuillez 
              vous inscrire directement sur BJColle pour indiquer les jours où 
              vous mangerez au restaurant scolaire.
            </p>
          </div>

          <Button 
            asChild 
            className="w-full max-w-sm"
          >
            <a 
              href="https://bjcolle.fr/no_waste.php" 
              target="_blank" 
              rel="noopener noreferrer"
            >
              Aller sur BJColle
            </a>
          </Button>
        </div>
      </Card>

      <p className="text-muted-foreground text-xs text-center">
        Merci de votre participation pour limiter le gaspillage alimentaire.
      </p>
    </div>
  );
}