"use client"
import { ExportPackagesButton } from "@/components/export-packages-button"
import { Button } from "@/components/ui/button"
import { Share2, Github } from "lucide-react"

export function BottomBar() {
  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t border-border">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <span className="text-sm font-medium">Percolate UI</span>
            <span className="text-xs text-muted-foreground">Design System Generator</span>
          </div>

          <div className="flex items-center gap-3">
            <Button variant="ghost" size="sm" className="gap-2">
              <Share2 className="h-4 w-4" />
              Share
            </Button>
            <Button variant="ghost" size="sm" className="gap-2">
              <Github className="h-4 w-4" />
              GitHub
            </Button>
            <ExportPackagesButton />
          </div>
        </div>
      </div>
    </div>
  )
}