Build a YouTube Thumbnail Downloader in React

/* lib/youtube-utils.js */
export const getVideoId = (url) => {
  const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
  const match = url.match(regExp);

  return (match && match[2].length === 11) ? match[2] : null;
}

"use client"

import { useState } from "react"
import { Download, Image as ImageIcon } from "lucide-react"

export default function ThumbnailGrabber() {
  const [url, setUrl] = useState("")
  const [id, setId] = useState<string | null>(null)

  const handleFetch = () => {
    // Basic Regex for ID extraction
    const match = url.match(/^.*(youtu.be\/|v\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);
    const videoId = (match && match[2].length === 11) ? match[2] : null;
    setId(videoId)
  }

  const download = (imgUrl: string) => {
     // Trigger download via temporary anchor tag
     const a = document.createElement('a');
     a.href = imgUrl;
     a.download = 'thumbnail.jpg';
     a.target = '_blank'; // Important for cross-origin
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
  }

  return (
    <div className="max-w-xl mx-auto p-6 bg-white rounded-xl shadow-xl border border-red-100">
       <div className="flex gap-2 mb-6">
          <input 
            value={url}
            onChange={e => setUrl(e.target.value)}
            placeholder="Paste YouTube URL here..."
            className="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-red-500 outline-none"
          />
          <button 
             onClick={handleFetch}
             className="bg-red-600 text-white px-6 rounded-lg font-bold hover:bg-red-700 transition"
          >
             GET
          </button>
       </div>

       {id ? (
         <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
            <div className="aspect-video rounded-lg overflow-hidden shadow-lg border border-slate-200">
               <img 
                 src={`https://img.youtube.com/vi/${id}/maxresdefault.jpg`} 
                 alt="Max Res" 
                 className="w-full h-full object-cover"
               />
            </div>
            
            <div className="flex gap-2 justify-center">
               <button 
                 onClick={() => download(`https://img.youtube.com/vi/${id}/maxresdefault.jpg`)}
                 className="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg hover:bg-slate-200 text-sm font-medium transition"
               >
                  <Download size={16} /> Download HD
               </button>
            </div>
         </div>
       ) : (
         <div className="text-center py-12 text-slate-400">
            <ImageIcon className="mx-auto mb-2 opacity-50" size={48} />
            <p>Paste a link to see the thumbnail</p>
         </div>
       )}
    </div>
  )
}