折扣标签

import React, { useState } from 'react';
import { CouponProps } from '../types';

export const CouponTicket: React.FC<CouponProps> = ({
  discountValue,
  discountText,
  startDate,
  code
}) => {
  const [copied, setCopied] = useState(false);

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

  // Logic for the cutout positioning:
  // The right section is fixed at 200px.
  // The divider section is 32px (w-8).
  // The center of the divider (and thus the cutout) is 200px + 16px = 216px from the right edge.
  // We use a radial gradient mask to create transparent circles at the top and bottom.
  const maskStyle: React.CSSProperties = {
    maskImage: `
      radial-gradient(circle 16px at calc(100% - 216px) 0, transparent 16px, black 16.5px), 
      radial-gradient(circle 16px at calc(100% - 216px) 100%, transparent 16px, black 16.5px)
    `,
    WebkitMaskImage: `
      radial-gradient(circle 16px at calc(100% - 216px) 0, transparent 16px, black 16.5px), 
      radial-gradient(circle 16px at calc(100% - 216px) 100%, transparent 16px, black 16.5px)
    `,
    maskSize: "100% 51%",
    WebkitMaskSize: "100% 51%",
    maskPosition: "top, bottom",
    WebkitMaskPosition: "top, bottom",
    maskRepeat: "no-repeat",
    WebkitMaskRepeat: "no-repeat"
  };

  return (
    // We apply the drop-shadow to the parent container. 
    // Because the child has a true mask (transparent holes), the shadow will curve into the gaps.
    <div className="w-full max-w-[700px] h-auto min-h-[160px] relative filter drop-shadow-xl">
      <div 
        className="flex w-full h-full bg-[#F5F5F5] rounded-3xl relative"
        style={maskStyle}
      >
        
        {/* LEFT SECTION: Details */}
        <div className="flex-1 flex flex-col items-center justify-center py-6 pl-4 pr-2 text-center space-y-2">
          <div className="text-3xl font-medium text-black tracking-tight">
            {discountValue}
          </div>
          <div className="text-lg text-black font-normal">
            {discountText}
          </div>
          <div className="text-gray-400 text-sm mt-1">
            Dal {startDate}
          </div>
          <div className="text-black font-medium text-sm mt-1">
            Codice sconto : {code}
          </div>
        </div>

        {/* DIVIDER SECTION: Just the dashed line now, cutouts are handled by mask */}
        <div className="relative w-8 flex flex-col items-center justify-center">
          <div className="absolute h-[70%] border-l-[1.5px] border-dashed border-gray-300 left-1/2 -translate-x-1/2 top-[15%]" />
        </div>

        {/* RIGHT SECTION: Button */}
        <div className="w-[200px] flex items-center justify-center p-4">
          <button
            onClick={handleCopy}
            className="bg-black hover:bg-gray-800 text-white text-sm font-normal py-3 px-10 rounded-full transition-all duration-200 ease-in-out active:scale-95 tracking-wide"
          >
            {copied ? 'COPIATO' : 'COPIA'}
          </button>
        </div>

      </div>
    </div>
  );
};