import { Meta, StoryObj } from '@storybook/react-webpack5';
import SentimentSurface from './SentimentSurface';

export default {
  component: SentimentSurface,
  title: 'Content/SentimentSurface/Tests',
} satisfies Meta<typeof SentimentSurface>;

type Story = StoryObj<typeof SentimentSurface>;

export const NestedSentiments: Story = {
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <SentimentSurface
        sentiment="negative"
        emphasis="base"
        style={{
          backgroundColor: 'var(--color-sentiment-background-surface)',
          color: 'var(--color-sentiment-content-primary)',
        }}
      >
        Outer: Negative, base
        <div style={{ margin: '16px 0 0 16px' }}>
          <SentimentSurface
            sentiment="success"
            emphasis="elevated"
            style={{
              backgroundColor: 'var(--color-sentiment-background-surface)',
              color: 'var(--color-sentiment-content-primary)',
            }}
          >
            Inner: Success, elevated
            <div style={{ margin: '12px 0 0 12px' }}>
              <SentimentSurface
                sentiment="warning"
                emphasis="base"
                style={{
                  backgroundColor: 'var(--color-sentiment-background-surface)',
                  color: 'var(--color-sentiment-content-primary)',
                }}
              >
                Deepest: Warning, base
              </SentimentSurface>
            </div>
          </SentimentSurface>
        </div>
      </SentimentSurface>
      <SentimentSurface
        sentiment="proposition"
        emphasis="elevated"
        style={{
          backgroundColor: 'var(--color-sentiment-background-surface)',
          color: 'var(--color-sentiment-content-primary)',
        }}
      >
        Outer: Proposition, elevated
        <div style={{ margin: '16px 0 0 16px' }}>
          <SentimentSurface
            sentiment="neutral"
            emphasis="base"
            style={{
              backgroundColor: 'var(--color-sentiment-background-surface)',
              color: 'var(--color-sentiment-content-primary)',
            }}
          >
            Inner: Neutral, base
          </SentimentSurface>
        </div>
      </SentimentSurface>
    </div>
  ),
};
