<template>
  <div class="quote__container">
    <div class="quote__quote">
      {{ quote.quote }}
    </div>
  </div>
</template>

<script setup lang="ts">
type Quote = {
  id: string,
  quote: string,
}

defineProps<{
  quote: Quote,
  editable?: boolean,
}>()
</script>

<style lang="scss">
@import '~/assets/css/components';

.quote {
  &__container {
    display: flex;
    align-items: center;
    width: 460px;
    height: 210px;
    margin: 32px;
    padding: 32px;
    background-color: $quote-background-color;
    border: $quote-border;
    color: $quote-text-color;
  }

  &__quote {
    font-size: 24px;
    border-radius: 0 16px 0 0;
    text-align: center;
  }
}
</style>