import { Card } from "antd";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import { useAppSelector } from "redux/hooks";
import ProTitle from "../ProTitle";
import styles from "./InfoButton.module.css";

export const InfoButton = ({
  icon,
  title,
  onInfoClick,
}: {
  icon: React.ReactNode;
  title: string;
  onInfoClick: () => void;
}) => {
  const { isRTL } = useAppSelector((state) => state.locale);
  return (
    <Card className={styles.homeServiceCard} onClick={onInfoClick}>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          marginTop: 1,
        }}
      >
        <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
          {icon}
          <ProTitle
            level={5}
            style={{
              marginTop: -2,
              fontSize: "1rem",
              color: "rgba(95, 108, 123, 1)",
            }}
          >
            {title}
          </ProTitle>
        </div>

        {isRTL ? (
          <BackIcon className={styles.infoIcon} />
        ) : (
          <NextIcon className={styles.infoIcon} />
        )}
      </div>
    </Card>
  );
};