"use client"

import { useState, useEffect } from "react"
import { Download, Figma } from "lucide-react"
import { useTheme } from "next-themes"

export function ExportButton() {
  const { resolvedTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <div className="flex gap-2">
        <button
          className="px-4 py-2 flex items-center gap-2 bg-black text-white"
          style={{ borderRadius: "6px !important" }}
        >
          <Download className="h-4 w-4" />
          <span>Export React code</span>
        </button>
        <button
          className="px-4 py-2 flex items-center gap-2 bg-black text-white"
          style={{ borderRadius: "6px !important" }}
        >
          <Figma className="h-4 w-4" />
          <span>Get Figma file</span>
        </button>
      </div>
    )
  }

  const isDarkTheme = resolvedTheme === "dark"
  const buttonStyle = {
    backgroundColor: isDarkTheme ? "#ffffff" : "#000000",
    color: isDarkTheme ? "#000000" : "#ffffff",
    borderRadius: "6px !important",
  }

  return (
    <div className="flex gap-2">
      <button
        className="px-4 py-2 flex items-center gap-2 transition-colors"
        style={buttonStyle}
        onClick={() => {
          console.log("Export React code clicked")
          // Export React code functionality here
        }}
      >
        <Download className="h-4 w-4" />
        <span>Export React code</span>
      </button>
      <button
        className="px-4 py-2 flex items-center gap-2 transition-colors"
        style={buttonStyle}
        onClick={() => {
          console.log("Get Figma file clicked")
          // Get Figma file functionality here
        }}
      >
        <Figma className="h-4 w-4" />
        <span>Get Figma file</span>
      </button>
    </div>
  )
}