---
to: <%- config.kebabCaseName -%>.tsx
---
import React from 'react';
import type { FC } from 'react';
import classNames from 'classnames';
import styles from './<%- config.kebabCaseName -%>.module.css';
import type { <%- config.pascalCaseName -%>Props } from './<%- config.kebabCaseName -%>.props';

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 -%>;