---
to: <%- config.kebabCaseName -%>.tsx
---
import type { FC } from 'react';
import classNames from 'classnames';
import type { Image, Direction } from '@wix/editor-react-types';
import styles from './<%- config.kebabCaseName -%>.module.css';

export type <%- config.pascalCaseName -%>Props = {
  id?: string;
  className?: string;
  image?: Image;
  title?: string;
  description?: string;
  direction?: Direction;
};

export const defaultProps = {
  title: 'Title',
  description: 'Description goes here',
} as const satisfies Omit<<%- config.pascalCaseName -%>Props, 'id' | 'className'>;

const <%- config.pascalCaseName -%>: FC<<%- config.pascalCaseName -%>Props> = ({
  id,
  className,
  image,
  title,
  description,
  direction,
}) => {
  return (
    <div
      id={id}
      dir={direction}
      className={classNames('<%- config.kebabCaseName -%>', styles.<%- config.camelCaseName -%>, styles.fallbackDirection, className)}
    >
      {image?.url ? (
        <img className={classNames('image', styles.image)} src={image.url} alt={image.alt} />
      ) : (
        <div className={classNames('image', styles.imagePlaceholder)} aria-hidden="true" />
      )}
      <div className={styles.body}>
        <h2 className={classNames('title', styles.title)}>{title}</h2>
        <p className={classNames('description', styles.description)}>{description}</p>
      </div>
    </div>
  );
};

export default <%- config.pascalCaseName -%>;
