import React from "react";
import styled from "styled-components";
import JobAd from "@models/JobAd";
import { Accordion } from "@components/index";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";

interface JobAdListProps {
  jobAds: JobAd[];
}

const List = styled.ul`
  padding: 0;
  li {
    margin: 1rem 0;
    list-style: none;
  }
`;

const JobAdList: React.FC<JobAdListProps> = ({ jobAds }) => (
  <List>
    {jobAds.map((ad) => (
      <li key={ad.id}>
        <Accordion title={ad.title_fi}>
          <div>
            <p>
              {ad.description_fi}
            </p>
            <ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>
              {ad.content_fi}
            </ReactMarkdown>
          </div>
        </Accordion>
      </li>
    ))}
  </List>

);

export default JobAdList;
