Untitled

import { useState } from "react";
import styles from "./Price.module.scss";
import Card from "./Card";

function PriceTab() {
  const [priceActive, setPriceActive] = useState(0);

  const priceTab = [
    {
      month: "1 месяц",
      content: [
        {
          title: "1",
          prevPrice: "1",
          price: "1",
        },
        {
          title: "2",
          prevPrice: "2",
          price: "2",
        },
        {
          title: "3",
          prevPrice: "3",
          price: "3",
        },
      ],
    },
    {
      month: "3 месяца",
      content: [
        {
          title: "1",
          prevPrice: "1",
          price: "1",
        },
        {
          title: "2",
          prevPrice: "2",
          price: "2",
        },
        {
          title: "3",
          prevPrice: "3",
          price: "3",
        },
      ],
    },
    {
      month: "6 месяцев",
      content: [
        {
          title: "1",
          prevPrice: "1",
          price: "1",
        },
        {
          title: "2",
          prevPrice: "2",
          price: "2",
        },
        {
          title: "3",
          prevPrice: "3",
          price: "3",
        },
      ],
    },
    {
      month: "12 месяцев",
      content: [
        {
          title: "1",
          prevPrice: "1",
          price: "1",
        },
        {
          title: "2",
          prevPrice: "2",
          price: "2",
        },
        {
          title: "3",
          prevPrice: "3",
          price: "3",
        },
      ],
    },
  ];

  return (
    <>
      <div className={styles.tabList}>
        <div className={styles.tabSection}>
          {priceTab.map((obj, i) => (
            <div
              key={i}
              onClick={() => setPriceActive(i)}
              className={
                priceActive === i
                  ? styles.tabLook + ` ` + styles.active
                  : styles.tabLook
              }
            >
              <button>{obj.month}</button>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.priceCard}>
        {priceTab.content.map((obj, i) => {
          console.log(obj);
        })}
      </div>
    </>
  );
}

export default PriceTab;