import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import TitleWorkspaceCard from './TitleWorkspaceCard';

const meta: Meta<typeof TitleWorkspaceCard> = {
  title: 'Create/TitleWorkspaceCard',
  component: TitleWorkspaceCard,
  parameters: {
    layout: 'padded',
  },
};
export default meta;

const Wrapper = styled.div`
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 100%;
`;

type Story = StoryObj<typeof TitleWorkspaceCard>;

function TitleWorkspaceCardDemo() {
  const [title, setTitle] = useState('');
  return (
    <Wrapper>
      <TitleWorkspaceCard title={title} setTitle={setTitle} />
    </Wrapper>
  );
}

export const Default: Story = {
  render: () => <TitleWorkspaceCardDemo />,
};