<template>
  <div class="item-container" :class="{'selected-item': selected}">
    <flag :iso="isoCode" size="l"></flag>
    <div class="supplier-item-text">
      <div class="supplier-item-name"> <span class="user-icon" v-if="isUserSupplier"><ph-user weight="fill" ></ph-user></span> {{name}}</div>
      <div class="supplier-item-address">{{ address }}</div>

    </div>
    <icon-button v-if="showTrash" icon="trash" @click="deleteClick"></icon-button>
  </div>
</template>

<script>

import IconButton from "@/components/UI/IconButton.vue";
import Flag from "@/components/UI/Flag.vue";
import {PhStar, PhUser} from "@phosphor-icons/vue";

export default {
  name: "SupplierItem",
  components: {PhUser, PhStar, Flag, IconButton},
  props: {
    name: {
      type: String,
      required: true
    },
    address: {
      type: String,
      required: true
    },
    isoCode: {
      type: String,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    isUserSupplier: {
      type: Boolean,
      required: false,
      default: false
    },
    selected: {
      type: Boolean,
      required: false,
      default: false
    },
    showTrash: {
      type: Boolean,
      required: false,
      default: 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;
  transition: background-color 0.3s ease;
}

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


.selected-item {
  background-color: #c3cfdf;
}

.selected-item:hover {
  background-color: #a6b6ca;
}



.user-icon {
  display: inline-flex;
  align-items: center;
}


.supplier-item-name {
  font-size: 1.6rem;
  font-weight: 600;
  color: #002F54;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

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

</style>