import { cn } from "@/lib/utils";
import type { ElementProps } from "@stripe/react-stripe-js";
import { cloneElement, type ReactElement, useState } from "react";

export function StripeInputElementWrapper({
  className,
  children,
}: {
  className?: string;
  children: ReactElement<ElementProps>;
}) {
  const [focused, setFocused] = useState(false);

  return (
    <div
      className={cn(
        "rounded-md border px-3 py-2 border-input shadow-xs transition-colors",
        focused && "ring-1 ring-ring",
        className
      )}
    >
      {cloneElement(children, {
        onFocus: (event) => {
          children.props.onFocus?.(event);
          setFocused(true);
        },
        onBlur: (event) => {
          children.props.onBlur?.(event);
          setFocused(false);
        },
      })}
    </div>
  );
}