import React from 'react';

interface VideoIntroductionProps {
  videoUrl: string;
  posterUrl: string;
}

const VideoIntroduction: React.FC<VideoIntroductionProps> = ({ videoUrl, posterUrl }) => {
  return (
    <div className="bg-white rounded-2xl border border-slate-200 p-6">
      <h2 className="text-xl font-bold text-slate-800 mb-4">Video Introduction</h2>
      <div className="aspect-video w-full">
        <video
          controls
          poster={posterUrl}
          className="w-full h-full rounded-lg object-cover shadow-md bg-slate-200"
          preload="metadata"
          aria-label="Video Introduction"
        >
          <source src={videoUrl} type="video/mp4" />
          <p>Your browser does not support the video tag. You can <a href={videoUrl} download className="text-blue-600 hover:underline">download the video</a> instead.</p>
        </video>
      </div>
    </div>
  );
};

export default VideoIntroduction;