  <template>
  <div class="container-fluid container-shadow p-2 rounded-3">
    <div class="row g-2">
      <radioCard
        radioLabel="Windshield"
        radioImage="windshield-damage.svg"
        altText="Windshield"
        groupName="damageKey"
        radioID="windshield"
      />
      <radioCard
        radioLabel="Side Window"
        radioImage="side-window-damage.svg"
        altText="Side Window"
        groupName="damageKey"
        radioID="sidewindow"
      />
      <radioCard
        radioLabel="Back Glass"
        radioImage="back-glass-damage.svg"
        altText="Back Glass"
        groupName="damageKey"
        radioID="backglass"
      />
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <buttonPrimary
          buttonText="Primary"
        />
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <listButton
          buttonText="List Button"
        />
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <a href="#">Text Link</a>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <p>This is default body copy font size/weight</p>
        <p class="small">This is small body copy using <code>.small</code> class</p>
        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h1>h1 Heading</h1>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h2>h2 Heading</h2>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h3>h3 Heading</h3>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h4>h4 Heading</h4>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h5>h5 Heading</h5>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h6>h6 Heading</h6>
      </div>
    </div>
    <div class="my-3">
      <div class="select-car">
        <div class="select-car-form">
          <radioQuestion
            questionText="What year is your vehicle?"
            :answers="this.years"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
import radioCard from "@/uxComponents/radioCard/radioCard";
import listButton from "@/uxComponents/listButton/listButton";
import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
export default {
  name: "App",
  components: {
    buttonPrimary,
    radioCard,
    listButton,
    radioQuestion
  },
  data() {
    return {
      years: [2023, 2022, 2021, 2020],
    };
  }
};
</script>
