import React, { useState } from "react";

interface CouponCodeProps {
  code: string;
}

const CouponCode: React.FC<CouponCodeProps> = ({ code }) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 3000);
  };

  return (
    <div className="mt-4 flex items-center justify-center">
      <span className="border border-dashed border-violet-500 px-5 py-2 text-violet-600 font-semibold tracking-wide rounded-l-md">
        {code}
      </span>

      <button
        onClick={handleCopy}
        className="border border-l-0 border-violet-500 text-violet-600 font-semibold px-5 py-2 rounded-r-md transition hover:bg-violet-50 active:scale-95"
      >
        {copied ? "COPIED" : "COPY CODE"}
      </button>
    </div>
  );
};

export default CouponCode;