import React from 'react';
import { Container } from 'components/layout';
import { Space } from 'components/dashboard';
import { useResponsiveLayout } from 'hooks';
import { Divider } from 'components';
import { Heading } from './heading';
const spaces = [
  {
    id: 12,
    name: 'Independence Day Celebrations',
    status: 'ended',
  },
  {
    id: 22,
    name: 'Independence Day Celebrations',
    status: 'active',
  },
  {
    id: 32,
    name: 'Independence Day Celebrations',
    status: 'upcoming',
  },
  {
    id: 42,
    name: 'Independence Day Celebrations',
    status: 'upcoming',
  },
  {
    id: 52,
    name: 'Independence Day Celebrations',
    status: 'upcoming',
  },
  {
    id: 62,
    name: 'Independence Day Celebrations',
    status: 'upcoming',
  },
  {
    id: 72,
    name: 'Independence Day Celebrations',
    status: 'upcoming',
  },
  {
    id: 82,
    name: 'Independence Day Celebrations',
    status: 'upcoming',
  },
];
export const ExploreSpaces = () => {
  const { isMobile } = useResponsiveLayout();
  const px = isMobile ? 'xs' : 's';
  const headingMarginX = isMobile ? 's' : 'l';
  const itemMarginX = isMobile ? '3xs' : '2xs';
  return (
    <Container>
      <Heading />
      <Divider colorVariant="divider" my="s" mx={headingMarginX} />
      <Container px={px} flexDirection="row" flexWrap="wrap">
        {spaces.map((item) => (
          <Space flexGrow={1} spaceVariant="full" my="xs" m={itemMarginX} key={item.id} />
        ))}
      </Container>
    </Container>
  );
};