import { EditReviewIcon, ReviewShareIcon } from '@/public/Icon';
import React from 'react';
import { Card } from 'react-bootstrap';
import style from './index.module.scss';

interface EditReviewProps {
  setEditReview?: React.Dispatch<React.SetStateAction<boolean>>;
  setShareModal?: React.Dispatch<React.SetStateAction<boolean>>;
  isNotification?: boolean;

  title?: string;
  description?: string;

  titleCss?: string;
}

const ReviewCard = ({
  setEditReview,
  setShareModal,
  isNotification = false,
  title = 'Lorem ipsum dolor',
  description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
}: EditReviewProps) => {
  return (
    <Card body className="border-0 p-sm-3 p-1  mb-4 position-relative">
      <div
        className={`d-flex flex-column flex-sm-row justify-content-start align-items-sm-center gap-2`}
      >
        <h5 className="text-primary-color fs-sm-12 fs-11 mb-0 ">{title}</h5>
        {!isNotification && (
          <>
            <div className="d-flex align-items-center gap-2">
              <EditReviewIcon
                onClick={() => setEditReview && setEditReview(true)}
              />
              <ReviewShareIcon
                onClick={() => setShareModal && setShareModal(true)}
              />
            </div>
          </>
        )}
      </div>
      <div className="d-flex flex-column flex-sm-row mt-3 justify-content-start gap-sm-4 align-items-sm-center">
        <h4 className="fs-sm-5 fs-10">july 20, 2022</h4>
        <h4 className="fs-sm-5 fs-10">04:00 pm to 05:30 pm</h4>
      </div>
      <p className="text-light-grey-2 fs-sm-5 fs-9 mt-3">{description}</p>
      {!isNotification && (
        <>
          <div
            className={`d-flex ${style.ratingSection} position-absolute  justify-content-center align-items-center gap-2`}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="35"
              height="34"
              viewBox="0 0 35 34"
              fill="none"
            >
              <path
                d="M20.199 4.97273L22.6923 9.9594C23.0323 10.6536 23.939 11.3194 24.704 11.4469L29.2232 12.1977C32.1132 12.6794 32.7932 14.7761 30.7107 16.8444L27.1973 20.3577C26.6023 20.9527 26.2765 22.1002 26.4607 22.9219L27.4665 27.2711C28.2598 30.7136 26.4323 32.0452 23.3865 30.2461L19.1507 27.7386C18.3857 27.2852 17.1248 27.2852 16.3457 27.7386L12.1098 30.2461C9.07816 32.0452 7.2365 30.6994 8.02983 27.2711L9.03566 22.9219C9.21983 22.1002 8.894 20.9527 8.299 20.3577L4.78566 16.8444C2.71733 14.7761 3.38316 12.6794 6.27316 12.1977L10.7923 11.4469C11.5432 11.3194 12.4498 10.6536 12.7898 9.9594L15.2832 4.97273C16.6432 2.2669 18.8532 2.2669 20.199 4.97273Z"
                fill="#F5C12E"
                stroke="#F5C12E"
                stroke-width="2.125"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <h5 className="mb-0 pb-0 fs-3 fw-bold">4.5</h5>
          </div>
        </>
      )}
    </Card>
  );
};

export default ReviewCard;