<template lang="pug">
  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(:style="{height: `${height}px`}")
    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4
      span.text-sm.font-semibold.whitespace-normal {{title}}
    .flex.items-center.gap-x-8
    .section-add.flex.justify-center.items-center.cursor-pointer Добавить данные
</template>

<script>
export default {
  name: "BaseDetailInfo",
  props: {
    title: String,
    height: Number,
  },
};
</script>

<style lang="sass" scoped>
.section-wrapper
  border: 1px solid var(--border-light-grey-color)
  border-radius: 4px
  color: var(--font-dark-blue-color)
  &.click
    background-color: var(--light-grey-bg-color)

.section-header
  min-height: 44px
  border-bottom: 1px solid var(--border-light-grey-color)

.section-add
  height: 100%
  color: var(--btn-blue-color)
</style>
