FloatingExpandableCard

import { FloatingExpandableCard } from "@/components/ui/floating-expandable-card";
import { HelpCircle, TrendingUp, Activity, Zap, Star, BarChart3 } from 'lucide-react'

export default function DemoOne() {
    return (
        <div className="fixed inset-0 w-screen h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center">
            
            <FloatingExpandableCard
                icon={HelpCircle}
                position="bottom-right"
                expandedWidth={380}
                expandedHeight={420}
                expandedBorderRadius={24}
                backgroundColor="bg-white/98"
                shadowIntensity="lg"
            >
                <div className="p-4 h-full flex flex-col">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="font-bold text-gray-900 text-base">Performance Metrics</h3>
                        <span className="text-xs text-green-500 font-medium">LIVE</span>
                    </div>
                    
                    <div className="grid grid-cols-2 gap-3 mb-4">
                        <div className="bg-gradient-to-br from-blue-50 to-blue-100/50 rounded-xl p-3">
                            <div className="flex items-center justify-between mb-2">
                                <TrendingUp className="h-4 w-4 text-blue-600" />
                                <span className="text-xs text-blue-600 font-medium">+12%</span>
                            </div>
                            <div className="text-2xl font-bold text-gray-900">89.3</div>
                            <div className="text-xs text-gray-600 mt-1">Health Score</div>
                        </div>
                        
                        <div className="bg-gradient-to-br from-green-50 to-green-100/50 rounded-xl p-3">
                            <div className="flex items-center justify-between mb-2">
                                <Activity className="h-4 w-4 text-green-600" />
                                <span className="text-xs text-green-600 font-medium">99.8%</span>
                            </div>
                            <div className="text-2xl font-bold text-gray-900">12ms</div>
                            <div className="text-xs text-gray-600 mt-1">Response Time</div>
                        </div>
                        
                        <div className="bg-gradient-to-br from-purple-50 to-purple-100/50 rounded-xl p-3">
                            <div className="flex items-center justify-between mb-2">
                                <Zap className="h-4 w-4 text-purple-600" />
                                <span className="text-xs text-purple-600 font-medium">High</span>
                            </div>
                            <div className="text-2xl font-bold text-gray-900">2.4M</div>
                            <div className="text-xs text-gray-600 mt-1">Requests/Day</div>
                        </div>
                        
                        <div className="bg-gradient-to-br from-amber-50 to-amber-100/50 rounded-xl p-3">
                            <div className="flex items-center justify-between mb-2">
                                <Star className="h-4 w-4 text-amber-600" />
                                <span className="text-xs text-amber-600 font-medium">4.8/5</span>
                            </div>
                            <div className="text-2xl font-bold text-gray-900">94%</div>
                            <div className="text-xs text-gray-600 mt-1">Satisfaction</div>
                        </div>
                    </div>
                    
                    <div className="flex-1 bg-gradient-to-b from-gray-50 to-gray-100/50 rounded-xl p-3">
                        <div className="flex items-center justify-between mb-3">
                            <div className="flex items-center gap-2">
                                <BarChart3 className="h-4 w-4 text-gray-600" />
                                <span className="text-xs font-medium text-gray-700">Performance Trend</span>
                            </div>
                            <span className="text-[10px] text-gray-500">Last 7 days</span>
                        </div>
                        
                        <div className="space-y-2">
                            <div className="flex items-center gap-2">
                                <div className="flex-1 h-8 bg-white rounded-lg p-1 flex items-end gap-1">
                                    {[65, 72, 68, 74, 79, 82, 89].map((height, i) => (
                                        <div
                                            key={i}
                                            className="flex-1 bg-gradient-to-t from-blue-500 to-blue-400 rounded-sm transition-all hover:opacity-80"
                                            style={{ height: `${height}%` }}
                                        />
                                    ))}
                                </div>
                            </div>
                            
                            <div className="grid grid-cols-3 gap-2 mt-3">
                                <div className="text-center">
                                    <div className="text-[10px] text-gray-500">Min</div>
                                    <div className="text-xs font-semibold text-gray-700">65</div>
                                </div>
                                <div className="text-center">
                                    <div className="text-[10px] text-gray-500">Avg</div>
                                    <div className="text-xs font-semibold text-gray-700">74.3</div>
                                </div>
                                <div className="text-center">
                                    <div className="text-[10px] text-gray-500">Max</div>
                                    <div className="text-xs font-semibold text-gray-700">89</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div className="mt-3 pt-3 border-t border-gray-200/50">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                                <span className="text-[10px] text-gray-600">All systems operational</span>
                            </div>
                            <span className="text-[10px] text-gray-400">Updated 2s ago</span>
                        </div>
                    </div>
                </div>
            </FloatingExpandableCard>
            
        </div>
    )
}