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'> {
  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>
  );
}