import "./AttractionShortPreview.css";

import { LocalizedString, useServerLocalization } from "@mt/i18n";
import classNames from "classnames";
import { TouchScrollWrapper } from "../TouchScrollWrapper/TouchScrollWrapper";
import { HTMLAttributes } from "react";

export interface AttractionShortPreviewProps
  extends Omit<HTMLAttributes<HTMLElement>, "title" | "content"> {
  img: string;
  title: LocalizedString;
  subtitle: LocalizedString;
  content: LocalizedString;
}

export function AttractionShortPreview({
  img,
  title,
  subtitle,
  content,
  className,
  ...props
}: AttractionShortPreviewProps) {
  const localizeText = useServerLocalization();

  return (
    <div
      className={classNames(className, "attraction-card g-flex-column")}
      {...props}
    >
      {img && (
        <img
          className="attraction-card__image"
          src={img}
          alt={localizeText(title)}
        />
      )}

      <TouchScrollWrapper className="g-flex-column__item">
        <div className="attraction-card__content">
          <h4 className="attraction-card__title">{localizeText(title)}</h4>

          <h5 className="attraction-card__subtitle">
            {localizeText(subtitle)}
          </h5>

          <p
            className="attraction-card__text"
            dangerouslySetInnerHTML={{ __html: localizeText(content) }}
          />
        </div>
      </TouchScrollWrapper>
    </div>
  );
}