wedding-planner-frontend/app/ui/components/form/affinitySlider.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

import { Slider } from 'primereact/slider';

export default function AffinitySlider({ value, onChange }: { value: number, onChange: (value: number) => void }) {

  const toNumber = (value : number | [number, number])  => {
    if(value instanceof Array) {
      return value[0];
    }
    return value;
  }

  const label = (value: number) => {
    if (value < 0.2) {
      return 'Nemesis';
    } else if (value < 0.5) {
      return 'Enemies';
    } else if (value < 0.9) {
      return 'Bad vibes';
    } else if (value < 1.1) {
      return 'Neutral';
    } else if (value < 1.5) {
      return 'Good vibes';
    } else if (value < 1.8) {
      return 'Good friends';
    } else {
      return 'Besties';
    }
  }

  return (
    <>
      <Slider value={value} min={0} max={2} step={.1} onChange={(e) => onChange(toNumber(e.value))} className='w-80 bg-gray-400' />
      <span className="px-4 w-1/5">
        {label(value)}
      </span>
    </>
  )
}