import React from "react";
import { ComparisonTableProps } from "./types";

import { Text } from "@shared/components/text";

export const ComparisonTable: React.FC<ComparisonTableProps> = ({
  title,
  disclaimer,
  table,
  maxWidth = true,
}) => {
  return (
    <div className="component-container">
      <div
        className={`mx-5 mb-5 mt-8 md:mt-18 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
      >
        <Text as="h2" className="heading2 md:heading1 md:text-center">
          {title}
        </Text>
        <div className="comparison-table-container mt-5 p-5 pt-0 md:mt-10 md:px-10 md:py-9">
          {table}
        </div>
        <Text as="div" className="micro mt-8 text-center">
          {disclaimer}
        </Text>
      </div>
    </div>
  );
};