"use client"

import useCommands from "@/lib/hooks/useCommands"
import styles from "@/styles/docs/commands.module.css"

function CommandInfo({ command }: { command: ApplicationCommand }) {
  const { name, description, default_member_permissions: permissions, dm_permission: dmUsable, options } = command

  return (
    <div className={styles.commandInfo}>
      <div>{name}</div>
    </div>
  )
}

export default function Commands() {
  const commands = useCommands()

  function renderCommandsInfo(commands: ApplicationCommand[]) {
    return commands.map((command, i) => <CommandInfo command={command} key={i} />)
  }

  return (
    <div className={styles.commands}>
      <h2>Commands</h2>
      <div className={styles.commandsInfo}>
        {commands ? (commands.length > 0 ? renderCommandsInfo(commands) : <div>Commands not found</div>) : <div>Loading...</div>}
      </div>
    </div >
  )
}