import { Container } from "../src/Container";
import {
  ActivityAlerts,
  Alarm,
  AmexLogo,
  ApplePayLogo,
  Battery,
  Bill,
  ChevronDown,
  Clock,
  CloseIcon,
  Configure,
  ContactSensor,
  CreditCard,
  FriendInvite,
  Gbp,
  GeoPoint,
  GooglePayLogo,
  GroupOfPeople,
  HelpAndSupport,
  InfoIcon,
  Integrations,
  KlarnaLogo,
  Lightbulb,
  MastercardLogo,
  MinusRed,
  NightSet,
  Notifications,
  PartialArm,
  PaypalLogo,
  Phone,
  Placeholder,
  Plus,
  Police,
  React,
  Switch,
  Truck,
  Update,
  VisaLogo,
} from "../src/Svg/index";

export const IconsSection = () => {
  return (
    <>
      <h2>Icons</h2>
      <div className="mb-4">
        <Container size="xxl">
          <div className="row">
            <div className="col">
              <Alarm />
            </div>
            <div className="col">
              <ActivityAlerts />
            </div>
            <div className="col">
              <Alarm />
            </div>
            <div className="col">
              <AmexLogo />
            </div>
            <div className="col">
              <ApplePayLogo />
            </div>
            <div className="col">
              <Battery />
            </div>
            <div className="col">
              <Bill />
            </div>
            <div className="col">
              <ChevronDown />
            </div>
            <div className="col">
              <Clock />
            </div>
            <div className="col">
              <CloseIcon />
            </div>
            <div className="col">
              <Configure />
            </div>
            <div className="col">
              <ContactSensor />
            </div>
            <div className="col">
              <CreditCard />
            </div>
            <div className="col">
              <FriendInvite />
            </div>
            <div className="col">
              <Gbp />
            </div>
            <div className="col">
              <GeoPoint />
            </div>
            <div className="col">
              <GooglePayLogo />
            </div>
            <div className="col">
              <GroupOfPeople />
            </div>
            <div className="col">
              <HelpAndSupport />
            </div>
            <div className="col">
              <InfoIcon />
            </div>
            <div className="col">
              <Integrations />
            </div>
            <div className="col">
              <KlarnaLogo />
            </div>
            <div className="col">
              <Lightbulb />
            </div>
            <div className="col">
              <Placeholder />
            </div>
            <div className="col">
              <MastercardLogo />
            </div>
            <div className="col">
              <MinusRed />
            </div>
            <div className="col">
              <NightSet />
            </div>
            <div className="col">
              <Notifications />
            </div>
            <div className="col">
              <PartialArm />
            </div>
            <div className="col">
              <PaypalLogo />
            </div>
            <div className="col">
              <Phone />
            </div>
            <div className="col">
              <Plus />
            </div>
            <div className="col">
              <Police />
            </div>
            <div className="col">
              <React />
            </div>
            <div className="col">
              <Switch />
            </div>
            <div className="col">
              <Truck />
            </div>
            <div className="col">
              <Update />
            </div>
            <div className="col">{<VisaLogo />}</div>
          </div>
        </Container>
      </div>
    </>
  );
};
