interface VideoProps {
  src: string;
  caption?: string;
}

export default function Video({ src, caption }: VideoProps) {
  return (
    <figure className="my-4">
      <div className="rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm overflow-hidden shadow-md">
        <video
          src={src}
          className="w-full"
          aria-label={caption ?? src}
          preload="metadata"
          controls
          loop
          muted
          playsInline
        />
      </div>
      {caption && (
        <figcaption className="mt-2 text-center text-sm text-gray-500 italic">
          {caption}
        </figcaption>
      )}
    </figure>
  );
}