import { Of, useOf } from '@storybook/blocks';

/**
 * A block that displays the story name or title from the of prop
 * - if a story reference is passed, it renders the story name
 * - if a meta reference is passed, it renders the stories' title
 * - if nothing is passed, it defaults to the primary story
 */
export const StoryName = ({ of }: { of?: Of }) => {
  const resolvedOf = useOf(of || 'story', ['story', 'meta']);
  switch (resolvedOf.type) {
    case 'story': {
      return <h3 className="css-wzniqs">{resolvedOf.story.name}</h3>;
    }
    case 'meta': {
      return <h3 className="css-wzniqs">{resolvedOf.preparedMeta.title}</h3>;
    }
  }
};
