import { Edit3, Plus, Coins } from "lucide-react"

interface EditSidebarProps {
  isOpen: boolean
  onClose: () => void
}

export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
  if (!isOpen) return null

  return (
    <div className="fixed left-0 top-0 h-full w-80 bg-white shadow-lg z-50 overflow-y-auto">
      <div className="p-4">
        {/* Header */}
        <div className="flex items-center gap-3 mb-6">
          <Edit3 className="h-6 w-6" />
          <h2 className="text-xl font-semibold">Edit Media</h2>
        </div>

        {/* Background and Meme Selection */}
        <div className="grid grid-cols-2 gap-4 mb-6">
          <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
            <div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden">
              <img
                src="/placeholder.svg?height=64&width=120"
                alt="Gaming background"
                width={120}
                height={64}
                className="w-full h-full object-cover"
              />
            </div>
            <span className="text-sm font-medium">Background</span>
          </div>
          <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
            <div className="w-full h-16 bg-gray-200 rounded mb-2 overflow-hidden">
              <img
                src="/placeholder.svg?height=64&width=120"
                alt="Meme character"
                width={120}
                height={64}
                className="w-full h-full object-cover"
              />
            </div>
            <span className="text-sm font-medium">Meme</span>
          </div>
        </div>

        {/* AI Background Search */}
        <div className="mb-6">
          <h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3>

          <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
            <div className="w-12 h-12 border-2 border-gray-400 rounded-full flex items-center justify-center mx-auto mb-3">
              <Plus className="h-6 w-6" />
            </div>
            <p className="text-sm font-medium mb-2">Generate a background with AI</p>
            <div className="flex items-center justify-center gap-1">
              <span className="text-lg font-bold">1</span>
              <div className="w-5 h-5 bg-yellow-400 rounded-full flex items-center justify-center">
                <Coins className="h-3 w-3 text-yellow-800" />
              </div>
            </div>
          </div>
        </div>

        {/* Meme Templates Grid */}
        <div className="grid grid-cols-2 gap-3">
          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
            <img
              src="/placeholder.svg?height=150&width=150"
              alt="Creepy face meme"
              width={150}
              height={150}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden relative">
            <img
              src="/placeholder.svg?height=150&width=150"
              alt="Confused person meme"
              width={150}
              height={150}
              className="w-full h-full object-cover"
            />
            <div className="absolute top-2 right-2 text-black font-bold text-sm">???</div>
            <div className="absolute bottom-2 left-2 text-black font-bold text-sm">???</div>
          </div>
          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
            <img
              src="/placeholder.svg?height=150&width=150"
              alt="Woody meme"
              width={150}
              height={150}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
            <img
              src="/placeholder.svg?height=150&width=150"
              alt="Doge meme"
              width={150}
              height={150}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="aspect-square bg-blue-900 rounded-lg overflow-hidden relative">
            <img
              src="/placeholder.svg?height=150&width=150"
              alt="Stock market meme"
              width={150}
              height={150}
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-blue-900/50 flex items-center justify-center">
              <span className="text-white text-xs">📈 28%</span>
            </div>
          </div>
          <div className="aspect-square bg-yellow-100 rounded-lg overflow-hidden">
            <img
              src="/placeholder.svg?height=150&width=150"
              alt="Room meme"
              width={150}
              height={150}
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </div>
    </div>
  )
}