"use client"

import { useState } from "react"

export default function RafflePage() {
  const [tickets, setTickets] = useState(0)

  return (
    <div className="max-w-lg mx-auto mt-8 space-y-4">
      <div className="border-b border-border pb-2">
        <h1 className="text-sm font-black uppercase tracking-wide text-foreground">Raffle</h1>
      </div>

      {/* Current raffle */}
      <div className="bg-gradient-to-br from-primary/20 to-card border border-primary/30 rounded-xl p-6 text-center">
        <div className="text-5xl mb-3">🎰</div>
        <h2 className="text-lg font-black text-foreground mb-1">Weekend Mega Raffle</h2>
        <p className="text-[11px] text-muted-foreground mb-4">Prize pool: 100,000 ETB · Draw: Saturday 20:00</p>

        <div className="bg-black/20 rounded-lg p-4 mb-4">
          <div className="text-[10px] text-muted-foreground mb-1">Your tickets</div>
          <div className="text-3xl font-black text-primary">{tickets}</div>
        </div>

        <div className="text-[11px] text-muted-foreground mb-4">
          Earn 1 raffle ticket for every 100 ETB wagered
        </div>

        <a href="/deposit" className="inline-block w-full bg-primary text-primary-foreground font-bold py-3 rounded uppercase hover:opacity-90 transition-opacity">
          Get More Tickets
        </a>
      </div>

      {/* Past winners */}
      <div className="bg-card border border-border rounded-lg overflow-hidden">
        <div className="bg-secondary px-4 py-2 text-[11px] font-bold uppercase text-muted-foreground">Past Winners</div>
        <div className="divide-y divide-border">
          {[
            { name: "John D.", prize: "50,000 ETB", date: "Feb 15" },
            { name: "Sarah M.", prize: "20,000 ETB", date: "Feb 8" },
            { name: "Abebe K.", prize: "30,000 ETB", date: "Feb 1" },
          ].map((winner, i) => (
            <div key={i} className="flex items-center justify-between px-4 py-3">
              <div className="flex items-center gap-3">
                <span className="text-lg">🏆</span>
                <div>
                  <div className="text-[12px] font-semibold text-foreground">{winner.name}</div>
                  <div className="text-[10px] text-muted-foreground">{winner.date}</div>
                </div>
              </div>
              <span className="text-primary font-bold text-[12px]">{winner.prize}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}