import { useId, type SVGProps } from 'react';

export type DepartureIconProps = SVGProps<SVGSVGElement> & {
  /** Accessibility title for the icon, set aria-hidden="true" if the icon is purely decorative. */
  title?: string;
  /**
   * The size of the icon.
   * It sets the font-size, possible as the width and height is `1em`. If not set, the icon will inherit the font size of its parent.
   */
  size?: '2xl' | 'xl' | 'large' | 'medium' | 'small';
  /**
   * The color of the icon.
   * @default 'inherit'
   */
  color?: 'inherit' | 'primary' | 'gray' | 'black' | 'white';
};

export const DepartureIcon = ({ title, size, color, ...props }: DepartureIconProps) => {
  const titleId = useId();
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" focusable='false' role='img' width='1em' height='1em'  aria-labelledby={title ? titleId : undefined} data-size={size} data-color={color} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path d="M22 18.5V20H2v-1.5zM7.53 5.784l8.09 2.531 2.42-1.395a2.65 2.65 0 0 1 3.672 1.064l.064.133.002.003c.585 1.292.002 2.757-1.159 3.425l-.078.044-8.383 5.073-.116.07-.133.025-5.555 1.05-.029.006-.03.002a2.507 2.507 0 0 1-2.433-1.237l-.002-.004-1.93-3.354 1.118-.654 3.561.955 2.523-1.46-3.244-5.622 1.332-.75.31.096Zm3.649 6.825L7.09 14.975l-.27.155-.3-.08-2.14-.574.777 1.346.084.124c.213.268.543.41.878.378l5.376-1.015 8.356-5.056.123-.075c.48-.34.656-.951.438-1.436a1.15 1.15 0 0 0-1.624-.523l-2.704 1.56-.285.165-.314-.098-7.202-2.254 2.895 5.017Z" /></svg>
  );
};