Manner Temp

/**
 * @file ui:manner-temp
 * @requires @seed-design/lynx-react@^1.0.0
 * @requires @seed-design/lynx-css@^1.0.0
 **/

import * as React from "@lynx-js/react";
import {
  MannerTemp as SeedMannerTemp,
  MannerTempEmote,
  type MannerTempProps as SeedMannerTempProps,
} from "@seed-design/lynx-react";
import { mannerTempToLevel } from "../lib/manner-temp-level";

export interface MannerTempProps extends Omit<SeedMannerTempProps, "children"> {
  /**
   * The manner temperature of the MannerTemp component.
   * Level will be calculated based on this value.
   * If level is provided, this will be ignored.
   */
  temperature: number;
}

/**
 * @see https://seed-design.io/lynx/components/manner-temp
 */
export const MannerTemp = React.forwardRef<unknown, MannerTempProps>(
  ({ temperature, level, ...otherProps }, ref) => {
    return (
      <SeedMannerTemp ref={ref} level={level ?? mannerTempToLevel(temperature)} {...otherProps}>
        {`${temperature}°C`}
        <MannerTempEmote />
      </SeedMannerTemp>
    );
  },
);
MannerTemp.displayName = "MannerTemp";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */