import './palmistry-container.css';

import { Step } from '@/hooks/palmistry/use-steps';

export enum ContainerType {
  Elements = 'elements',
  ColorYouLike = 'color-you-like',
  Decisions = 'decisions',
  GuidancePlan = 'guidance-plan',
  PersonalStatement = 'personal-statement',
  ScanInfo = 'scan-info',
  Upload = 'upload',
  ScanPhoto = 'scan-photo',
  Email = 'email',
  SubscriptionPlan = 'subscription-plan',
}

type Props = {
  children: React.ReactNode;
  singleQuestion: boolean;
  type: Step | null;
};

export default function PalmistryContainer(props: Props) {
  const className = ['palmistry-container'];

  if (props.type) {
    className.push(`palmistry-container_type_${props.type}`);
  }

  if (props.singleQuestion) {
    className.push('palmistry-container_single-question');
  }

  return (
    <section className={className.join(' ')}>
      {props.children}
    </section>
  );
}
