<Card>Hello</Card>

<Card headerText="Some Card Header" />

<Card headerText="Awesome Header" subHead="I'm awesome too :)" />

<Card headerText="I have a menu" menuOptions={[{ text: 'Some Option' }]} />

<Card headerText="Some Media" media="https://picsum.photos/300" />

<Card
  headerText="Supporting Text"
  supportingText="A nice supporting text here. It's commonly used to describe some item etc."
/>

<Card
  actions={[{ text: 'Cancel' }, { text: 'Save', variant: 'contained' }]}
/>

() => {
  const [mode, setMode] = useState('light')
  return (
    <div>
      <Card
        theme={{ mode }}
        menuOptions={[
          {
            text: 'Dark Mode',
            handler: () => {
              setMode('dark')
            },
          },
          {
            text: 'Light Mode',
            handler: () => {
              setMode('light')
            },
          },
        ]}
        headerText="It's a material design card"
        subHead="Aimed to display important data."
        media="https://picsum.photos/300"
        actions={[
          { text: 'Cancel' },
          { text: 'Save', appearance: 'default', variant: 'contained' },
        ]}
        supportingText="You can do anything you want."
      />
    </div>
  )
}