<template>
  <div
      class="bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-shadow overflow-hidden"
      :class="[bordered ? 'border border-gray-200' : '']"
      data-aos="fade-up"
  >
    <div
        v-if="$slots.icon || icon"
        class="w-12 h-12 md:w-16 md:h-16 rounded-lg bg-primary/10 text-primary p-3 flex items-center justify-center mb-5"
    >
      <slot name="icon">
        <i v-if="icon" :class="icon" class="text-xl"></i>
      </slot>
    </div>
    <h3
        class="text-xl md:text-2xl font-bold text-gray-800 mb-3"
        v-if="$slots.title || title"
    >
      <slot name="title">{{ title }}</slot>
    </h3>
    <p
        class="text-gray-600 mb-6"
        :class="{ 'md:text-lg': largeText }"
        v-if="$slots.default"
    >
      <slot></slot>
    </p>
    <div v-if="$slots.actions">
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    bordered: {
      type: Boolean,
      default: true
    },
    largeText: {
      type: Boolean,
      default: false
    }
  }
}
</script>