"use client"

import Image from "next/image"
import { useStore } from "@/lib/store"

export function PartyGroupSection() {
  const { settings, getLiveQRCodeUrl } = useStore()

  const handleJoin = () => {
    const url = getLiveQRCodeUrl("party-group")
    if (url) {
      window.open(url, "_blank")
    }
  }

  return (
    <section className="py-8 px-4 bg-app-bg">
      <div className="max-w-sm mx-auto">
        <div className="bg-app-card/40 backdrop-blur-md rounded-xl p-5 border border-app-border text-center">
          <p className="text-app-text-muted text-xs mb-3">
            每天 {settings.authorInfo?.liveTime || "06:00-09:00"} · 免费分享
          </p>

          {/* QR Code - smaller */}
          <div className="bg-white rounded-lg p-2 mb-3 inline-block">
            <Image src="/images/image.png" alt="派对群二维码" width={120} height={120} className="mx-auto" />
          </div>

          <p className="text-app-text text-sm font-medium mb-1">扫码加入派对群</p>
          <p className="text-app-text-muted text-xs">长按识别二维码</p>
        </div>
      </div>
    </section>
  )
}