import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
import classNames from "classnames"

function Player({
  src,
  text,
  primary,
  edit,
}: {
  src: string
  text: string
  primary?: boolean
  edit?: boolean
}) {
  return (
    <div className="flex w-96 flex-col items-center gap-16 py-8">
      <p
        className={classNames(
          "font-farro text-5xl",
          primary ? "font-semibold" : "font-normal"
        )}
      >
        {text}
      </p>
      <div className="relative">
        <img className="pixelart w-64" src={"/assets/" + src} alt={src} />
        {edit ? (
          <button className="absolute top-4 right-4  h-14 w-14 rounded-lg border-2 border-dashed border-warn bg-gray-800 bg-opacity-90">
            <FontAwesomeIcon
              className="h-full w-full text-warn"
              icon={faCaretDown}
            />
          </button>
        ) : (
          <></>
        )}
      </div>
    </div>
  )
}

export default Player
