import { useState } from "react";
import { Grid } from "../components/Grid/Grid";
import Tabs from "../components/Tab/Tab";
import { Attributes } from "../partials/feed-input/Attributes";
import { Brokers } from "../partials/feed-input/Brokers";
import { SaleUnits } from "../partials/feed-input/SaleUnits";
const tabItems = [
  { label: "مولفه" },
  { label: "کارگزار" },
  { label: "واحد فروش" },
];

export default function Pricing() {
  const [selectedTab, setSelectedTab] = useState<number>(0);
  const handleTabChange = (index: number) => {
    setSelectedTab(index);
  };

  return (
    <Grid container column className="gap-2">
      <Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
      {selectedTab === 0 ? (
        <Attributes />
      ) : selectedTab === 1 ? (
        <Brokers />
      ) : (
        <SaleUnits />
      )}
    </Grid>
  );
}
