import ProfileInfo from '@/components/ProfileInfo';
import Button from '@/components/ui/Button';
import PageHeader from '@/components/ui/PageHeader';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { Col, Row } from 'react-bootstrap';

const MYProfile = () => {
  const router = useRouter();
  const { data: session } = useSession();

  const userData = session?.user?.user
  const userImage = userData?.image?.file || '/images/users/booking-user-1.png';

  return (
    <>
      <div className="">
        <PageHeader title="My Profile" isShowBackButton />

        <Row className="mt-3">
          <Col xl={10}>
            <Row className="gy-3 gy-md-0">
              <Col lg={2} md={4}>
                {/* <Avatar img="/images/users/booking-user-1.png" size="xl" /> */}
                <img src={`${process.env.NEXT_PUBLIC_MEDIA_URL}${userImage}`} alt="User" />

              </Col>
              <Col lg={10} md={8}>
                <Row className="gy-3">
                  <Col lg={6} md={6}>
                    <ProfileInfo
                      iconImage="/images/icons/user-icon.png"
                      title="Full Name"
                      subTitle={userData?.full_name}
                    />
                  </Col>
                  <Col lg={6} md={6}>
                    <ProfileInfo
                      iconImage="/images/icons/phone-icon.png"
                      title="Phone Number"
                      subTitle={userData?.phone_number}
                    />
                  </Col>
                  <Col lg={6} md={12} className="d-none"></Col>
                  <Col lg={6} md={6}>
                    <ProfileInfo
                      iconImage="/images/icons/world.png"
                      title="Location"
                      subTitle={userData?.city}
                    />
                  </Col>
                  <Col lg={6} md={6}>
                    <ProfileInfo
                      iconImage="/images/icons/calendar.png"
                      title="Date Of Birth"
                      subTitle={new Date(userData?.dob).toLocaleDateString('en-GB')}
                    />
                  </Col>

                  <Col lg={6} md={12} className="d-none"></Col>
                  <Col lg={6} md={6}>
                  <ProfileInfo
                      iconImage="/images/icons/email.png"
                      title="Email"
                      subTitle={userData?.email}
                    />
                  </Col>
                  <Col lg={6} md={6}>
                    <ProfileInfo
                      iconImage="/images/icons/user-icon.png"
                      title="Gender"
                      subTitle={userData?.gender}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>

            <ProfileInfo
              containerStyle="my-3"
              iconImage="/images/icons/location.png"
              title="Address"
              subTitle={userData?.address}
              fontWeight="fw-normal"
            />

            <Button
              onClick={() => router.push('/user/edit-profile')}
              className="btn btn-feature"
              size="md"
            >
              Edit Profile
            </Button>
          </Col>
        </Row>
      </div>
    </>
  );
};

export default MYProfile;