
<template>
  <div class="item-container">
    <div class="material-item-text">
      <div class="supplier-item-name">{{name}}</div>
      <div class="supplier-item-address">{{partNumber}}</div>
    </div>
    <icon-button icon="trash" @click="deleteClick"></icon-button>
  </div>
</template>

<script>

import IconButton from "@/components/UI/IconButton.vue";

export default {
  name: "MaterialItem",
  components: {IconButton},
  props: {
    name: {
      type: String,
      required: true
    },
    partNumber: {
      type: String,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  methods: {
    deleteClick() {
      this.$emit("delete", this.id);
    }
  }
}
</script>

<style scoped>

.item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.6rem 3.6rem;
  background: white;
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  gap: 2.4rem;
  flex: 0 0 50rem
}

.item-container:hover {
  background-color: rgba(107, 134, 156, 0.05);
}

.supplier-item-name {
  font-size: 1.6rem;
  font-weight: 600;
  color: #001D33
}

.supplier-item-address {
  font-size: 1.4rem;
  color: #6b7280;
}

</style>