<script setup lang="ts">
import { useLoginModalStore } from '#/store';

const loginModalStore = useLoginModalStore();

function openLogin() {
  loginModalStore.open();
}
</script>

<template>
  <div class="h-[217px] rounded-[30px] bg-white px-[18px] py-[20px]">
    <img
      alt="user"
      class="h-[52px] w-[52px] object-cover"
      src="@/assets/image/user.png"
    />
    <div>
      <h2 class="mt-[5px] text-[15px] font-bold">Enterprise Customers</h2>
      <p class="w-[249px] text-sm text-xs leading-relaxed">
        Nulputate nisi vestibulum nisl laoreet, in finibus nisl euismod. Nullam
        venenatis eu lacus auctor accumsan. Class aptent tacit.
      </p>
      <div
        class="m-auto mt-[12px] flex h-[32px] w-[185px] cursor-pointer items-center justify-center rounded-[25px] bg-gradient-to-b from-[#8B0046] to-[#460023] text-[10px] text-white"
        @click="openLogin"
      >
        Login
        <img
          alt=""
          class="ml-[6px] h-[11.05px] w-[10.51px]"
          src="@/assets/image/login.png"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
