import ContentWrapper from "../ContentWrapper/ContentWrapper";
import { useState } from "react";

const array = [
  {
    img: "/assets/emoji_1.webp",
    title: "ARLO: Energetic & Bold",
    description:
      "Arlo is a bundle of energy, always ready for an adventure! He will ignite your child’s curiosity and guide them through exciting learning journeys with bold enthusiasm.",
  },
  {
    img: "/assets/emoji_2.webp",
    title: "Ms. Kai – Calm & Thoughtful",
    description:
      "A gentle guide, Ms. Kai helps your child reflect and thoughtfully navigate tasks with care and patience.",
  },
  {
    img: "/assets/emoji_3.webp",
    title: "Ava – Cheerful & Optimistic",
    description:
      "Ava’s infectious optimism brings happiness to every lesson. Her optimism motivates every child to stay engaged and excited!",
  },
  {
    img: "/assets/emoji_4.webp",
    title: "Dax – Creative & Imaginative",
    description:
      "Dax brings imagination to life, making learning exciting and fun. His creative approach helps every child discover the joy of expressing themselves!",
  },
  {
    img: "/assets/emoji_5.webp",
    title: "Monstero – Curious & Inquisitive",
    description:
      "Monstero’s love for discovery inspires your child to ask questions and learn in an engaging, fun way!",
  },
  {
    img: "/assets/emoji_6.webp",
    title: "Yara – Loyal & Protective",
    description:
      "Yara stands by your child, offering unwavering support and helping them feel confident and ready to tackle any challenge.",
  },
];

export default function InteractionTabs() {
  const [select, setSelect] = useState({
    img: "/assets/emoji_1.webp",
    title: "ARLO : Energetic & Bold",
    description:
      "Arlo is always full of excitement and loves adventure. He will help your child explore new topics with enthusiasm!",
  });

  return (
    <ContentWrapper>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          maxWidth: "600px",
          margin: "0px auto",
        }}
      >
        {array.map((item) => (
          <img
            src={item.img}
            width={"55px"}
            style={{
              border: item.title === select.title ? "3px solid #0348A8" : null,
              boxShadow:
                "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
              borderRadius: "100px",
              background: item.title === select.title ? "white" : null,
              padding: "6px",
            }}
            onClick={() => setSelect(item)}
          />
        ))}
      </div>
      <div style={{ textAlign: "center", margin: "40px 0px" }}>
        <img src={select.img} width={"170px"} />
        <h4>{select.title}</h4>
        <p>{select.description}</p>
      </div>
    </ContentWrapper>
  );
}
