import type { CollapseProps } from "antd";
import { Collapse } from "antd";
import React, { useState } from 'react';
import { useTranslation } from "react-i18next";
import classNames from 'classnames';
import CollapsChildren from "./CollapsChildren";

const DistributorCollaps = () => {

  const { t } = useTranslation();
  const [activeKey, setActiveKey] = useState<string[]>(["1"]);

  const onChange = (key: string | string[]) => {
    if (typeof key === 'string') {
      setActiveKey([key]);
    } else {
      setActiveKey(key);
    }
  };

  const items: CollapseProps["items"] = [
    {
      style:{background:"transparent"},
      key: "1",
      label: t("Ankara"),
      children: (
        <p>
          <CollapsChildren/>
        </p>
      ),
    },
    {
      key: "2",
      label: t("Gaziantep"),
      children: (
        <p>
          <CollapsChildren/>
        </p>
      ),
    },
    {
      key: "3",
      label: t("İstanbul"),
      children: (
        <p>
          {/* {t("Sakarya")}. */}
        </p>
      ),
    },
    {
      key: "4",
      label: t("İzmir"),
      children: (
        <p>
          {/* {t("Sakarya")}. */}
        </p>
      ),
    },

    {
      key: "5",
      label: t("Kocaeli"),
      children: (
        <p>
          {/* {t("Sakarya")}. */}
        </p>
      ),
    },
    {
      key: "6",
      label: t("Konya"),
      children: (
        <p>
          {/* {t("Sakarya")}. */}
        </p>
      ),
    },
    {
      key: "7",
      label: t("Sakarya"),
      children: (
        <p>
          {/* {t("Sakarya")}. */}
        </p>
      ),
    },
   
  ];

  return (
    <Collapse
    className="distributor_collaps"
      defaultActiveKey={["1"]}
      expandIconPosition="right"
      bordered={false}
      activeKey={activeKey}
      onChange={onChange}
      
      items={items.map(item => ({
        ...item,
        label: (
          <span
            className={classNames({
              'label-active': activeKey.includes(item.key as string)
            })}
          >
            {item.label}
          </span>
        )
      }))}
    />
  );
};
export default DistributorCollaps
