import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import CarIcon from "components/Icons/CarIcon";
import { Button, Card } from "antd";
import styles from "../checkout.module.css";
import { useState } from "react";
import { CarBottomSheet } from "./CarBottomSheet";

export function CarCard() {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const [isCarBottomSheetOpen, setIsCarBottomSheetOpen] = useState(false);
  return (
    <>
      <Card onClick={() => {
        setIsCarBottomSheetOpen(true);
      }}>
        <div className={styles.carCard}>
          <Button
            shape="circle"
            icon={<CarIcon />}
            style={{
              backgroundColor: "var(--background)",
              border: "none",
              width: 32,
              height: 32,
              minWidth: 32,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
            }}
          />
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              width: "100%",
            }}
          >
            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 18,
                lineHeight: "140%",
                color: "#333333",
              }}
            >
              {t("checkout.addCarDetails")}
            </ProText>

            <ProText
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: 16,
                lineHeight: "140%",
                color: "#777580",
              }}
            >
              {t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
            </ProText>
          </div>
          {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
        </div>
      </Card>
      <CarBottomSheet
        isOpen={isCarBottomSheetOpen}
        onClose={() => setIsCarBottomSheetOpen(false)}
      />
    </>
  );
}
