import type { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import { FloatingMediaWrapper } from './FloatingMediaWrapper';

const meta: Meta<typeof FloatingMediaWrapper> = {
  title: 'Media/FloatingMediaWrapper',
  component: FloatingMediaWrapper,
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;
type Story = StoryObj<typeof FloatingMediaWrapper>;

function DemoContent() {
  return (
    <div className="flex h-full w-full items-center justify-center bg-primary/10 text-sm text-muted-foreground">
      Media content
    </div>
  );
}

export const Inline: Story = {
  render: () => {
    const [isFloating, setIsFloating] = useState(false);
    return (
      <div className="max-w-2xl p-8">
        <FloatingMediaWrapper
          isFloating={isFloating}
          setIsFloating={setIsFloating}
          title="Demo Player"
          playerId="storybook-inline"
        >
          <DemoContent />
        </FloatingMediaWrapper>
      </div>
    );
  },
};

export const Floating: Story = {
  render: () => {
    const [isFloating, setIsFloating] = useState(true);
    return (
      <div className="max-w-2xl p-8">
        <FloatingMediaWrapper
          isFloating={isFloating}
          setIsFloating={setIsFloating}
          title="Demo Player"
          playerId="storybook-floating"
        >
          <DemoContent />
        </FloatingMediaWrapper>
      </div>
    );
  },
};

export const PrimaryColorVariant: Story = {
  render: () => {
    const [isFloating, setIsFloating] = useState(true);
    return (
      <div className="max-w-2xl p-8">
        <FloatingMediaWrapper
          isFloating={isFloating}
          setIsFloating={setIsFloating}
          title="Primary Themed Player"
          colorVariant="primary"
          playerId="storybook-primary"
        >
          <DemoContent />
        </FloatingMediaWrapper>
      </div>
    );
  },
};