Untitled

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
import { Switch } from "@/components/ui/switch";
import { Progress } from "@/components/ui/progress";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, Radio } from "@/components/ui/radio";
import { ChevronDown, Info, Gift, ShoppingCart, Bell, Star, ShieldCheck, Lock, CheckCircle, XCircle } from "lucide-react";

export default function CartPromotions() {
  const [expanded, setExpanded] = useState(false);
  const [showPopup, setShowPopup] = useState(false);
  const [secureCheckout, setSecureCheckout] = useState(false);
  const [showSecureInfo, setShowSecureInfo] = useState(false);

  return (
    <TooltipProvider>
      <div className="max-w-md mx-auto space-y-4">
        {/* Variante 1: Toggle Switch */}
        <div className="flex items-center space-x-2 bg-gray-100 p-3 rounded-lg">
          <Switch checked={secureCheckout} onCheckedChange={setSecureCheckout} />
          <span>Secure your tickets and get 10% cashback if you don’t win.</span>
          <Tooltip>
            <Info className="text-gray-500 cursor-pointer" />
          </Tooltip>
        </div>

        {/* Variante 2: Card Selectabil */}
        <Card onClick={() => setSecureCheckout(!secureCheckout)} className={secureCheckout ? "border-green-500" : "border-gray-300"}>
          <CardContent className="p-4 flex items-center space-x-2 cursor-pointer">
            <ShieldCheck className={secureCheckout ? "text-green-500" : "text-gray-500"} />
            <span>Secure Checkout - 10% Cashback</span>
          </CardContent>
        </Card>

        {/* Variante 3: Inline Button */}
        <Button variant={secureCheckout ? "secondary" : "outline"} onClick={() => setSecureCheckout(!secureCheckout)}>
          {secureCheckout ? "Secure Checkout Enabled" : "Add Secure Checkout"}
        </Button>

        {/* Variante 4: Pop-up Explicativ */}
        <div>
          <Button onClick={() => setShowSecureInfo(true)} variant="ghost">What is Secure Checkout?</Button>
          {showSecureInfo && (
            <div className="absolute top-20 bg-white p-4 shadow-lg rounded-md w-64">
              <p className="font-semibold">Secure Checkout Benefits:</p>
              <ul className="mt-2 text-sm space-y-1">
                <li>✔ 10% Cashback if you don’t win</li>
                <li>✔ Extra security on your payment</li>
              </ul>
              <Button className="mt-3 w-full" onClick={() => setShowSecureInfo(false)}>Close</Button>
            </div>
          )}
        </div>

        {/* Variante 5: Checkbox */}
        <div className="flex items-center space-x-2 p-3 rounded-lg border">
          <Checkbox checked={secureCheckout} onCheckedChange={setSecureCheckout} />
          <span>Enable Secure Checkout (10% Cashback)</span>
        </div>

        {/* Variante 6: Radio Button Selection */}
        <RadioGroup value={secureCheckout ? "yes" : "no"} onValueChange={(val) => setSecureCheckout(val === "yes")}>
          <Radio value="yes">Enable Secure Checkout</Radio>
          <Radio value="no">Disable Secure Checkout</Radio>
        </RadioGroup>

        {/* Variante 7: Icon Label */}
        <div className="flex items-center space-x-2">
          <Lock className="text-gray-500" />
          <span className="cursor-pointer" onClick={() => setSecureCheckout(!secureCheckout)}>
            {secureCheckout ? "Secure Checkout Enabled" : "Enable Secure Checkout"}
          </span>
        </div>

        {/* Variante 8: Toggle Button */}
        <Button onClick={() => setSecureCheckout(!secureCheckout)} variant="ghost">
          {secureCheckout ? <CheckCircle className="text-green-500" /> : <XCircle className="text-red-500" />} Secure Checkout
        </Button>

        {/* Variante 9: Dropdown Selection */}
        <div className="relative">
          <Button onClick={() => setExpanded(!expanded)} variant="outline" className="w-full flex justify-between">
            {secureCheckout ? "Secure Checkout Enabled" : "Enable Secure Checkout"} <ChevronDown />
          </Button>
          {expanded && (
            <div className="absolute w-full bg-white shadow-lg rounded-md mt-2">
              <Button onClick={() => { setSecureCheckout(true); setExpanded(false); }} className="w-full">Enable Secure Checkout</Button>
              <Button onClick={() => { setSecureCheckout(false); setExpanded(false); }} className="w-full">Disable Secure Checkout</Button>
            </div>
          )}
        </div>

        {/* Variante 10: Progress Indicator */}
        <div className="p-3 rounded-lg bg-gray-100">
          <span>Secure Checkout Progress</span>
          <Progress value={secureCheckout ? 100 : 0} className="mt-2" />
        </div>

        {/* Buton de acțiune principal */}
        <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold">
          PROCEED TO PLAY »
        </Button>
      </div>
    </TooltipProvider>
  );
}