"use client";
import { useState } from "react";

export function PricingToggle() {
  const [annual, setAnnual] = useState(true);

  return (
    <div className="flex flex-col items-center w-full max-w-sm mx-auto">
      <div className="flex items-center gap-3 mb-8">
        <span className={`text-sm ${!annual ? "text-foreground font-medium" : "text-muted-foreground"}`}>Monthly</span>
        <button 
          onClick={() => setAnnual(!annual)}
          className="relative inline-flex h-6 w-11 items-center rounded-full bg-zinc-800 transition-colors focus:outline-none focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2 focus:ring-offset-[#050505]"
        >
          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition duration-200 ease-in-out ${annual ? "translate-x-6" : "translate-x-1"}`} />
        </button>
        <span className={`text-sm flex items-center ${annual ? "text-foreground font-medium" : "text-muted-foreground"}`}>
          Annually <span className="ml-2 rounded-full bg-green-500/20 px-2 py-0.5 text-[10px] font-medium text-green-400">-20%</span>
        </span>
      </div>

      <div className="w-full rounded-2xl border border-border bg-[#0a0a0a] p-8 shadow-xl text-left">
        <h3 className="text-lg font-medium text-foreground mb-2">Pro Plan</h3>
        <p className="text-sm text-muted-foreground mb-6">Everything you need to scale.</p>
        <div className="mb-6 flex items-baseline text-5xl font-extrabold text-foreground">
          ${annual ? "19" : "24"}
          <span className="ml-1 text-xl font-medium text-muted-foreground">/mo</span>
        </div>
        <button className="w-full rounded-md bg-foreground text-background py-2.5 text-sm font-medium hover:bg-[#e0e0e0] transition-colors">
          Subscribe Now
        </button>
      </div>
    </div>
  );
}