import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import baseStyle from "./styles/footer.scss"
import { useEffect, useState } from "preact/hooks"

// Import the JSON data
import buttonsData from "../buttons.json"

export default (() => {
  // Define the component
  const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
    // Since the data is static, you can directly use buttonsData
    const [buttons, setButtons] = useState(buttonsData)

    // Optional: If you need to perform any data manipulation or sorting, you can do it here
    // For example, if buttonsData isn't sorted, but you need to sort it:
    // useEffect(() => {
    //   const sortedButtons = [...buttonsData].sort(/* your sorting function */);
    //   setButtons(sortedButtons);
    // }, []);

    return (
      <div class={`btn8831-container ${displayClass ?? ""}`}>
        {buttons.map((button, index) => (
          <a href={button.url} key={index}>
            <img src={button.image} alt={button.alt} />
          </a>
        ))}
      </div>
    )
  }

  // Define custom styles
  const customStyle = `
    .btn8831-container {
      display: flex;
      flex-wrap: wrap;
      max-width: 60%;
      margin: 0 auto;
    }
    .btn8831-container a {
      margin: 5px;
    }
    .btn8831-container img {
      width: 88px;
      height: 31px;
    }
  `

  // Combine base styles with custom styles
  Btn8831.css = baseStyle + customStyle

  return Btn8831
})() satisfies QuartzComponentConstructor