import YogaImageComponent from "@/components/yoga.image.component";
import {YogaCustomerFeedback_Plain} from "@/types/generated-strapi-interfaces/api/yoga-customer-feedback";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/api/strapi/strapi-api";
import clsx from "clsx";

export interface Props {
    config: YogaCustomerFeedback_Plain,
    active: boolean
}

const FeedbackComponent = ({active,config: {customerName, feedback, customerImage, customerDescription}}: Props) => {
    const imageFile: StrapiFile = customerImage as StrapiFile;
    return (
        <div className={clsx("carousel-item ", {"active":active })}>
            <div className="testimonial_content">
                <i className="fa-solid fa-quote-left"></i>
                <p className="testimonial_paragraph">“{feedback}”</p>
                <figure><YogaImageComponent src={strapiApi.getImageUrl(imageFile?.url)} alt=""
                                            className="img-fluid"/></figure>
                <p className="testimonial_person_name">{customerName}</p>
                <span>{customerDescription}</span>
            </div>
        </div>

    );
}

export default FeedbackComponent;