# All files / src/components/bets TeaserControl.tsx

0% Statements 0/79
100% Branches 0/0
0% Functions 0/4
0% Lines 0/79

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118

     import React from 'react';
    import { BetLeg } from '../../types/game.types';

    interface TeaserControlProps {
      legs: BetLeg[];
      selectedPoints: number;
      onChange: (points: number) => void;
    }

    /**
     * Get sport from legs (assumes all legs are same sport for teasers)
     */
    function getSportFromLegs(legs: BetLeg[]): 'nfl' | 'nba' | 'unknown' {
      if (legs.length === 0) return 'unknown';

      const firstGame = legs[0]?.game;
      if (!firstGame) return 'unknown';

      const sportKey = firstGame.sportKey.toLowerCase();

      if (sportKey.includes('nfl') || sportKey.includes('football')) {
        return 'nfl';
      }
      if (sportKey.includes('nba') || sportKey.includes('basketball')) {
        return 'nba';
      }

      return 'unknown';
    }

    /**
     * Get available teaser points for sport
     */
    function getTeaserOptions(sport: 'nfl' | 'nba' | 'unknown'): number[] {
      if (sport === 'nfl') {
        return [6, 6.5, 7];
      }
      if (sport === 'nba') {
        return [4, 4.5, 5];
      }
      return [6]; // Default
    }

    /**
     * Get teaser odds for given points
     */
    function getTeaserOdds(sport: 'nfl' | 'nba' | 'unknown', points: number): number {
      // Standard teaser odds
      if (sport === 'nfl') {
        if (points === 6) return -110;
        if (points === 6.5) return -120;
        if (points === 7) return -130;
      }
      if (sport === 'nba') {
        if (points === 4) return -110;
        if (points === 4.5) return -115;
        if (points === 5) return -120;
      }
      return -110; // Default
    }

    export default function TeaserControl({
      legs,
      selectedPoints,
      onChange
    }: TeaserControlProps) {
      const sport = getSportFromLegs(legs);
      const options = getTeaserOptions(sport);
      const odds = getTeaserOdds(sport, selectedPoints);

      if (sport === 'unknown') {
        return (
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
            <p className="text-sm text-yellow-800">
              ⚠️ Unable to determine sport. Add game legs first.
            </p>
          </div>
        );
      }

      return (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-gray-700">
              Teaser Points ({sport.toUpperCase()})
            </label>
            <span className="text-xs text-gray-500">
              Odds: <span className="font-semibold">{odds}</span>
            </span>
          </div>

          <div className="flex gap-2">
            {options.map((points) => (
              <button
                key={points}
                onClick={() => onChange(points)}
                className={`
                  flex-1 px-4 py-2 rounded-lg font-medium text-sm transition-all
                  ${
                    selectedPoints === points
                      ? 'bg-purple-600 text-white shadow-md'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }
                `}
              >
                {points} pts
              </button>
            ))}
          </div>

          <div className="text-xs text-gray-500 bg-gray-50 rounded p-2">
            <strong>Note:</strong> Teaser adjusts spread/total by {selectedPoints} points in your favor.
            All legs must be spread or total bets.
          </div>
        </div>
      );
    }