---

import { Button } from 'exchange-elements/v2';

import { GearIcon, TrashIcon } from '@src/components/Icon';

import { LegendValueItem } from '@src/types';

import styles from './index.module.scss';

interface LegendSeriesRowProps {
  label: string;
  values?: LegendValueItem[];
  onRemove?: () => void;
  onEdit?: () => void;
}

export function LegendSeriesRow({ label, values, onRemove, onEdit }: LegendSeriesRowProps) {
  return (
    <div className={styles.item}>
      <div className={styles.symbol}>{label}</div>

      <div className={styles.priceWrapper}>
        {values?.map(({ id, value, color }) => (
          <span
            key={id}
            style={{ color }}
            className={styles.price}
          >
            {value}
          </span>
        ))}

        {onEdit && (
          <Button
            size="sm"
            className={styles.button}
            onClick={onEdit}
            label={<GearIcon />}
          />
        )}

        {onRemove && (
          <Button
            size="sm"
            className={styles.button}
            onClick={onRemove}
            label={<TrashIcon />}
          />
        )}
      </div>
    </div>
  );
}





.item {
  width: 100%;
  max-width: max-content;
  display: flex;
  align-items: center;
  gap: var(--space-0500);

  .priceWrapper {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--space-0500);
  }

  .symbol,
  .price {
    font-size: var(--space-0750);
    font-weight: var(--font-medium);
  }

  .button {
    display: none;
    width: var(--space-1000);
    height: var(--space-1000);
    border-radius: var(--space-0125);
    color: var(--neutral-13);
    padding: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;

    & p {
      display: flex;
      justify-content: center;
      align-items: start;
      padding: 0;

      svg {
        width: var(--space-0875);
        height: var(--space-0875);
      }
    }
  }

  &:hover .button {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  &:hover .price {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
}