Card

export const AllStates = () => (
  <div className="grid max-w-2xl gap-6">
    <Card>
      <Card.Header>
        <Card.Title>Basic Card</Card.Title>
        <Card.Description>A simple card with header and content.</Card.Description>
      </Card.Header>
      <Card.Content>
        <p className="text-steel text-sm">Card content goes here.</p>
      </Card.Content>
    </Card>

    <Card>
      <Card.Header>
        <Card.Title>With Footer</Card.Title>
        <Card.Description>Card with action buttons in footer.</Card.Description>
      </Card.Header>
      <Card.Content>
        <p className="text-steel text-sm">Some content here.</p>
      </Card.Content>
      <Card.Footer>
        <Button variant="outline">Cancel</Button>
        <Button>Save</Button>
      </Card.Footer>
    </Card>

    <Card>
      <Card.Header>
        <Card.Title>With Action Button</Card.Title>
        <Card.Description>Header contains an action button.</Card.Description>
        <Card.Action>
          <Button variant="outline" size="sm">
            Settings
          </Button>
        </Card.Action>
      </Card.Header>
      <Card.Content>
        <p className="text-steel text-sm">Content with header action.</p>
      </Card.Content>
    </Card>

    <Card>
      <Card.Header className="border-chrome border-b">
        <Card.Title>With Bordered Header</Card.Title>
        <Card.Description>The header has a bottom border.</Card.Description>
      </Card.Header>
      <Card.Content>
        <p className="text-steel text-sm">Content below bordered header.</p>
      </Card.Content>
    </Card>
  </div>
);