import React from "react";
import { BarChart } from "react-native-gifted-charts";

const FamilyChart = () => {
  // Define the data for the bars
  const data = [
    {
      value: 600, // Total value of the bar
      stacks: [
        { value: 290, color: "#e7d526" }, // First part of the bar
        { value: 310, color: "#00a8b6" }, // Second part of the bar
      ],
      label: "M",
    },
    {
      value: 400,
      stacks: [
        { value: 190, color: "#e7d526" },
        { value: 210, color: "#00a8b6" },
      ],
      label: "Tu",
    },
    {
      value: 400,
      stacks: [
        { value: 210, color: "#e7d526" },
        { value: 190, color: "#00a8b6" },
      ],
      label: "W",
    },
    {
      value: 800,
      stacks: [
        { value: 410, color: "#e7d526" },
        { value: 390, color: "#00a8b6" },
      ],
      label: "Th",
    },
    {
      value: 600,
      stacks: [
        { value: 220, color: "#e7d526" },
        { value: 380, color: "#00a8b6" },
      ],
      label: "F",
    },
    {
      value: 200,
      stacks: [
        { value: 160, color: "#e7d526" },
        { value: 40, color: "#00a8b6" },
      ],
      label: "Sa",
    },
    {
      value: 200,
      stacks: [
        { value: 160, color: "#e7d526" },
        { value: 40, color: "#00a8b6" },
      ],
      label: "Su",
    },
  ];

  return (
    <BarChart
      stackData={data}
      width={250}
      height={150} // Height of the chart
      barWidth={20} // Width of each bar
      noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
      maxValue={1000} // Max value on the chart
      stepValue={200} // Step size for horizontal lines
      yAxisThickness={0} // Hide the Y-axis line
      yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
      hideRules={false} // Show the horizontal lines
      rulesColor="#dadada" // Color for the horizontal lines
      stackBorderTopLeftRadius={5} // Round the bars
      stackBorderTopRightRadius={5} // Round the bars
      spacing={16}
      disableScroll
    />
  );
};

export default FamilyChart;
