import { View, type ViewProps } from "@tarojs/components";
import classNames from "classnames";
import React from "react";

export type IconNames =
  | "calculator"
  | "compass"
  | "eye"
  | "eye-slash"
  | "phone-flip"
  | "address-book"
  | "pen-to-square"
  | "location-dot"
  | "clock"
  | "user-tie"
  | "receipt"
  | "file-signature"
  | "chart-line"
  | "chart-pie"
  | "right-left"
  | "circle-check"
  | "bell"
  | "chart-bar"
  | "user-switch"
  | "circle-question"
  | "key"
  | "arrow-right-from-bracket"
  | "house"
  | "check"
  | "comment-dots"
  | "circle-xmark"
  | "phone"
  | "weight-scale"
  | "minus"
  | "clipboard-list"
  | "folder"
  | "file-invoice"
  | "camera"
  | "id-card"
  | "truck"
  | "credit-card"
  | "lock"
  | "money-bill"
  | "chevron-right"
  | "circle-info"
  | "user"
  | "chevron-down"
  | "plus"
  | "chevron-left";

interface IconProps extends ViewProps {
  name: IconNames;
  size?: number;
  color?: string;
  style?: React.CSSProperties;
}

const icon: React.FC<IconProps> = (props) => {
  const { name, size, color = "var(--color-primary)" } = props;
  const rootStyle = {
    fontSize: Number.isInteger(size)
      ? `calc(var(--scale-factor) * ${size}px)`
      : "calc(var(--text-xs) * 2)",
    color,
  };

  return (
    <View
      {...props}
      className={classNames(`iconfont icon-${name}`, props.className)}
      style={rootStyle}
    />
  );
};

export default icon;