"use client";

import React from "react";
import type { IconProps } from "./Icon";
import { Icon } from "./Icon";

export interface PictogramProps extends Omit<IconProps, "type"> {
  /**
   * Pictogram name. Should correspond to your pictogram sprite entries.
   * For example: 'pictogram-skylink' will look for 'pictogram-skylink' (light)
   * and 'pictogram-skylink--dark' (dark) in the sprite.
   */
  name: string;
}

/**
 * Pictogram component for theme-aware pictographic icons.
 *
 * This component automatically handles light/dark theme switching by using
 * different sprite entries based on the current theme (.is-light/.is-dark classes).
 *
 * Your sprite should contain both light and dark versions:
 * - Light version: Use the exact name provided (e.g., 'pictogram-skylink')
 * - Dark version: Add '--dark' suffix (e.g., 'pictogram-skylink--dark')
 */
const Pictogram: React.FC<PictogramProps> = ({ name, ...other }) => {
  return <Icon name={name} type="pictogram" {...other} />;
};

Pictogram.displayName = "Pictogram";

export { Pictogram };