import Image from "next/image"

export default function AspectRatio() {
  return (
    <div className="w-full max-w-md overflow-hidden rounded-md shadow-sm">
      <div className="relative aspect-video w-full bg-zinc-100 dark:bg-zinc-800">
        <Image
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
          fill
          className="object-cover"
        />
      </div>
      <div className="p-4 bg-white dark:bg-zinc-950 border-x border-b border-zinc-200 dark:border-zinc-800 rounded-b-md">
         <h3 className="font-medium text-zinc-900 dark:text-zinc-50">16:9 Aspect Ratio</h3>
         <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">Perfect for embedded videos or hero images.</p>
      </div>
    </div>
  )
}