import PaperCard from '@/components/Cards/PaperCard';
import SettingCard from '@/components/Cards/SettingCard';
import RadioButton from '@/components/Form/RadioButton';
import Modal1 from '@/components/Modal/Modal1';
import PageHeader from '@/components/ui/PageHeader';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Col, Row } from 'react-bootstrap';

const Settings = () => {
  const [showDeletedModal, setShowDeletedModal] = useState<boolean>(false);

  const router = useRouter();

  return (
    <>
      <Head>
        <title>Setting | Deliver X</title>
      </Head>

      <PageHeader title="Settings" />
      <Row className="mt-3">
        <Col md={10}>
          <Row className="gy-4">
            <Col md={6}>
              <PaperCard className="p-3 d-flex justify-content-between align-items-center rounded-pill">
                <h6 className="mb-0 pb-0">Notifications</h6>
                <RadioButton />
              </PaperCard>
            </Col>
            <Col md={6}>
              <SettingCard
                title="Change Password"
                onClick={() =>
                  router.push('/user/auth/change-password')
                }
              />
            </Col>
            <Col md={6}>
              <SettingCard
                title="Terms & Conditions"
                onClick={() =>
                  router.push('/user/settings/terms-and-condition')
                }
              />
            </Col>
            <Col md={6}>
              <SettingCard
                title="Privacy Policy"
                onClick={() =>
                  router.push('/user/settings/privacy-policy')
                }
              />
            </Col>
            <Col md={6}>
              <SettingCard
                title=" About Us"
                onClick={() => router.push('/user/settings/about-us')}
              />
            </Col>
            <Col md={6}>
              <SettingCard
                title=" Delete Account"
                onClick={() => setShowDeletedModal(true)}
              />
            </Col>
          </Row>
        </Col>
      </Row>

      <Modal1
        show={showDeletedModal}
        handleClose={() => setShowDeletedModal(false)}
        title="Delete Account"
        description="Are you sure you want to delete this account?"
        handleYesClick={() => router.push('/auth/login')}
      />
    </>
  );
};

export default Settings;
