Coupon Input

import { CouponInput } from "@/components/ui/coupon-input";

export default function Example() {
  return <CouponInput />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const CouponInput = forwardRef(({ className, onApply, ...props }, ref) => {
  const [code, setCode] = useState("");
  return (
    <div ref={ref} className={cn("flex gap-2", className)} {...props}>
      <input type="text" value={code} onChange={(e) => setCode(e.target.value.toUpperCase())} placeholder="Enter coupon code"
        className="flex h-10 flex-1 rounded-md border bg-background px-3 py-2 text-sm font-mono uppercase placeholder:text-muted-foreground placeholder:normal-case focus:outline-none focus:ring-2 focus:ring-ring"
      />
      <button onClick={() => { if (code.trim()) onApply?.(code.trim()); }}
        className="inline-flex h-10 items-center rounded-md border px-4 text-sm font-medium hover:bg-accent"
      >Apply</button>
    </div>
  );
});
CouponInput.displayName = "CouponInput";

export { CouponInput };