import React from 'react';

export default function TicketCard({ activated, videoRef, onVideoEnded, onFirstFrame, className = "" }) {
  return (
    <div className={`ticket-wrapper ${activated ? 'activated' : ''} ${className}`}>
      {/* SVG Clip Path definitions */}
      <svg width="0" height="0" style={{ position: 'absolute' }}>
        <defs>
          <clipPath id="ticket-clip" clipPathUnits="objectBoundingBox">
            <path d="M 0,0 
                     L 1,0 
                     L 1,0.64
                     A 0.04,0.03 0 0,0 1,0.72
                     L 1,1 
                     L 0,1 
                     L 0,0.72
                     A 0.04,0.03 0 0,0 0,0.64
                     Z" />
          </clipPath>
        </defs>
      </svg>

      {/* Animated glow halo behind the card */}
      <div className="ticket-halo" aria-hidden="true"></div>

      <div className="ticket-card">
        {/* Video Player */}
        <video
          ref={videoRef}
          src="/SMART ANIMATE.mp4"
          poster="/ticket-poster.jpg"
          className="ticket-video"
          preload="auto"
          muted
          playsInline
          onLoadedData={onFirstFrame}
          onEnded={onVideoEnded}
        />
        {/* Subtle sheen sweep that plays while idle */}
        {!activated && <div className="ticket-sheen" aria-hidden="true"></div>}
      </div>
    </div>
  );
}