import React from "react";
import Image from "next/image";

import Collapse from "../../molecules/collapse";

import styles from "./Service.module.scss";

const Service = ({ data }: any) => {
  return (
    <article className={styles.service}>
      <div className="mb-4 relative service-image">
        <Image src={data.cover_img} alt="" fill />
      </div>

      <div className="mb-4" dangerouslySetInnerHTML={{ __html: data.description }}></div>

      {data.tabs.map(({ id, name, description }: any) => (
        <Collapse key={id} name={name} description={description} />
      ))}
    </article>
  );
};

export default Service;