import BorderImage from "./borderImage";
import styles from "../styles/Components.module.css";
import { useSession } from "next-auth/react";

export default function Preview(props) {
  const { data: session } = useSession();
  const { data, current, selected, apply } = props;

  const currentItem = data?.filter(
    (item) => parseInt(item.id) === (current != null ? parseInt(current) : 0)
  )?.[0];

  const selectedItem = data?.filter(
    (item) => parseInt(item.id) === parseInt(selected)
  )?.[0];

  // console.log(currentItem, selectedItem, session);

  return (
    <div className={styles.preview}>
      current
      <br />
      {currentItem && (
        <BorderImage
          border={currentItem}
          selected={-1}
          size={256}
          customImage={session?.user?.image}
        />
      )}
      <br />
      new
      <br />
      {selectedItem && (
        <BorderImage
          border={selectedItem}
          selected={-1}
          size={256}
          customImage={session?.user?.image}
        />
      )}
      <br />
      <button onClick={apply}>Apply</button>
    </div>
  );
}