import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Coins, Edit3, Plus } from 'lucide-react';

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

export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
    return (
        <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <SheetContent side="right" className="w-80 overflow-y-auto">
                <SheetHeader>
                    <SheetTitle className="flex items-center gap-3">
                        <Edit3 className="h-6 w-6" />
                        Edit Media
                    </SheetTitle>
                </SheetHeader>

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

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

                        <div className="mb-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
                            <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full border-2 border-gray-400">
                                <Plus className="h-6 w-6" />
                            </div>
                            <p className="mb-2 text-sm font-medium">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="flex h-5 w-5 items-center justify-center rounded-full bg-yellow-400">
                                    <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 overflow-hidden rounded-lg bg-gray-100">
                            <img
                                src="/placeholder.svg?height=150&width=150"
                                alt="Creepy face meme"
                                width={150}
                                height={150}
                                className="h-full w-full object-cover"
                            />
                        </div>
                        <div className="relative aspect-square overflow-hidden rounded-lg bg-gray-100">
                            <img
                                src="/placeholder.svg?height=150&width=150"
                                alt="Confused person meme"
                                width={150}
                                height={150}
                                className="h-full w-full object-cover"
                            />
                            <div className="absolute top-2 right-2 text-sm font-bold text-black">???</div>
                            <div className="absolute bottom-2 left-2 text-sm font-bold text-black">???</div>
                        </div>
                        <div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
                            <img
                                src="/placeholder.svg?height=150&width=150"
                                alt="Woody meme"
                                width={150}
                                height={150}
                                className="h-full w-full object-cover"
                            />
                        </div>
                        <div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
                            <img
                                src="/placeholder.svg?height=150&width=150"
                                alt="Doge meme"
                                width={150}
                                height={150}
                                className="h-full w-full object-cover"
                            />
                        </div>
                        <div className="relative aspect-square overflow-hidden rounded-lg bg-blue-900">
                            <img
                                src="/placeholder.svg?height=150&width=150"
                                alt="Stock market meme"
                                width={150}
                                height={150}
                                className="h-full w-full object-cover"
                            />
                            <div className="absolute inset-0 flex items-center justify-center bg-blue-900/50">
                                <span className="text-xs text-white">📈 28%</span>
                            </div>
                        </div>
                        <div className="aspect-square overflow-hidden rounded-lg bg-yellow-100">
                            <img
                                src="/placeholder.svg?height=150&width=150"
                                alt="Room meme"
                                width={150}
                                height={150}
                                className="h-full w-full object-cover"
                            />
                        </div>
                    </div>
                </div>
            </SheetContent>
        </Sheet>
    );
}