import React, { useState } from "react";
import styles from "./News.module.css";
import Link from "next/link";
import { Button, ButtonGroup } from "@chakra-ui/react";
import { motion, AnimateSharedLayout } from "framer-motion";

import randomcolor from "randomcolor";

export const News = React.memo(({ title, date, image, link }) => {
  const [stateOpen, setOpen] = useState(false);

  function handleToggle() {
    setOpen(!stateOpen);
  }

  return (
    <AnimateSharedLayout type="crossfade">
      <motion.div
        layoutId="data"
        whileHover={{ scale: 1.1, opacity: 0.9 }}
        className={styles.news}
      >
        <div
          style={{
            color: "black",
            borderColor: `transparent ${randomcolor()} transparent transparent`,
          }}
          className={styles.news_corner}
        >
          <span>hiru</span>
        </div>
        <div className={styles.left_col}>
          <img src={image} />
        </div>
        <div className={styles.right_col}>
          <div className={styles.news_title}>
            <span className={styles.title_wrapper}>{title}</span>
          </div>

          <div>
            <div className={styles.buttons}>
              <div>
                <Button colorScheme="teal" size="xs" onClick={handleToggle}>
                  Read More
                </Button>
              </div>
              <div>
                <Link href={link}>
                  <Button colorScheme="teal" size="xs" variant="outline">
                    Source
                  </Button>
                </Link>
              </div>
            </div>
            <div className={styles.date}>{date}</div>
          </div>
        </div>
      </motion.div>
      {stateOpen && (
        <motion.div
          onClick={handleToggle}
          layoutId="data"
          className={styles.modal_window}
        >
          <span className={styles.body_text}>
            But a community is only as robust as the dedication of its members.
            Whether people will actually want to use a site that does away with
            so many of the familiar features of major social media networks
            remains to be seen.
          </span>
        </motion.div>
      )}
    </AnimateSharedLayout>
  );
});

export default News;