import React from 'react';
import { BfoGrid, BfoGridItemSizes } from '../layouts/grid/grid';
import { Card } from '../components/card/card';
import { Button } from '../components/button/button';

export default () => {
  return (
    <BfoGrid itemSize={BfoGridItemSizes.m}>
      <Card
        heading="Flight Manager"
        icon="clock"
        bodyText="Schedule, log and review flights"
      >
        <Button
          buttonType="iconOnly"
          size="m"
          handleTrigger={() => {}}
          arrow="right"
          isDisabled={false}
        />
      </Card>
      <Card
        heading="BETA Academy"
        icon="book"
        bodyText="Enroll in courses, complete modules, hone your skills"
      >
        <Button
          buttonType="iconOnly"
          size="m"
          handleTrigger={() => {}}
          arrow="right"
          isDisabled={false}
        />
      </Card>
      <Card
        heading="Hangar & Stats"
        icon="graph"
        bodyText="Assess your skills and accomplishments over time"
      >
        <Button
          buttonType="iconOnly"
          size="m"
          handleTrigger={() => {}}
          arrow="right"
          isDisabled={false}
        />
      </Card>
      <Card
        heading="Pilot Profile"
        icon="user"
        bodyText="Review and update your profile, medical information, certifications and availability"
      >
        <Button
          buttonType="iconOnly"
          size="m"
          handleTrigger={() => {}}
          arrow="right"
          isDisabled={false}
        />
      </Card>
    </BfoGrid>
  );
};