<!--
  LaneSelectionSection.vue – bane-valg radio buttons and lane status display.

  Props:
    lanes              – array of lane objects from the department
    selectedLaneId     – currently selected lane id
    washType           – "Manual" | "Machine"
    departmentName     – human-readable department name
    isLaneAvailableFn  – function(lane) => boolean
    isMachineAvailableFn – function(laneId) => boolean

  Emit:
    update:selectedLaneId  – new lane id selected
    update:washType        – "Manual" | "Machine"
-->
<script setup lang="ts">
import SelfServeLaneStep from "@/components/displays/selfServe/SelfServeLaneStep.vue";

interface Props {
  lanes: any[];
  selectedLaneId: number | string | null;
  washType: string;
  departmentName: string | null;
  isLaneAvailableFn: (lane: any) => boolean;
  isMachineAvailableFn: (laneId: number | string | null) => boolean;
}

defineProps<Props>();

const emit = defineEmits<{
  "update:selectedLaneId": [id: number];
  "update:washType": [type: string];
}>();

function handleLaneUpdate(id: number) {
  emit("update:selectedLaneId", id);
}

function handleWashTypeUpdate(type: string) {
  emit("update:washType", type);
}
</script>

<template>
  <SelfServeLaneStep
    :lanes="lanes"
    :selected-lane-id="selectedLaneId"
    :wash-type="washType"
    :department-name="departmentName"
    :is-lane-available="isLaneAvailableFn"
    :is-machine-available="isMachineAvailableFn"
    @update:selected-lane-id="handleLaneUpdate"
    @update:wash-type="handleWashTypeUpdate"
  />
</template>

<style scoped>
/* Lane selection styling is inherited from SelfServeLaneStep */
</style>
