import { withConfiguration } from '@pega/cosmos-react-core';
import type { CaseViewProps as WSSCaseViewProps } from '@pega/cosmos-react-wss';

import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

// Presentation-only component: props contract defined by WSSCaseViewProps.
// No PCore / PConnect dependencies — all data is provided through props.
function {{COMPONENT_CLASS_NAME}}(props: WSSCaseViewProps) {
  const {
    caseId,
    heading,
    summary,
    stages,
    tasks,
    feed,
    utility
  } = props;

  return (
    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      <header>
        <h1>{heading}</h1>
        <span>{caseId}</span>
      </header>

      {summary && (
        <section aria-label={summary.label}>
          <h2>{summary.label}</h2>
          {summary.content}
        </section>
      )}

      {stages && (
        <section aria-label={stages.label}>
          <h2>{stages.label}</h2>
          {stages.content}
        </section>
      )}

      {tasks && (
        <section aria-label={tasks.label}>
          <h2>{tasks.label}</h2>
          {tasks.content}
        </section>
      )}

      {feed && (
        <section aria-label={feed.label}>
          <h2>{feed.label}</h2>
          {feed.content}
        </section>
      )}

      {utility && (
        <section aria-label={utility.label}>
          <h2>{utility.label}</h2>
          {utility.content}
        </section>
      )}
    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
  );
}

export default withConfiguration({{COMPONENT_CLASS_NAME}});