<script setup lang="ts">
defineProps<{
  src: string
  width?: string
  height?: string
  icon?: string
  title?: string
}>()
</script>

<template>
  <div class="relative overflow-hidden rounded ">
    <img :src="src" :height="height" :width="width" class="object-cover w-full h-full min-h-[100px] outline-none">
    <div class="absolute bottom-0 px-2 left-0 flex w-full z-10 justify-between items-center h-[26px]">
      <div>
        {{ title }}
      </div>

      <Iconify v-if="icon" :icon="icon" />
    </div>
    <svg viewBox="0 0 210 26" class="absolute bottom-0 w-full " fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:anim="http://www.w3.org/2000/anim" anim="" anim:transform-origin="50% 50%" anim:duration="1" anim:ease="ease-in-out">
      <g id="accident_tiltle_bg1" opacity="0.577746" filter="url(#filter0_i_0_10627)">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.108154 0.51355H209.302V22C209.302 24.2092 207.511 26 205.302 26H4.10816C1.89902 26 0.108154 24.2092 0.108154 22V0.51355Z" fill="url(#paint0_linear_0_10627)" />
      </g>
      <defs>
        <filter id="filter0_i_0_10627" x="0.108154" y="0.51355" width="209.194" height="25.4865" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
          <feOffset dy="1" />
          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
          <feColorMatrix type="matrix" values="0 0 0 0 0.654596 0 0 0 0 0.854219 0 0 0 0 1 0 0 0 1 0" />
          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_10627" />
        </filter>
        <linearGradient id="paint0_linear_0_10627" x1="0.108154" y1="26" x2="209.302" y2="26" gradientUnits="userSpaceOnUse">
          <stop stop-color="#09D4BC" />
          <stop offset="1" stop-color="#233344" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</template>
