import { iconVariants } from "./variants"

import type { IconProps } from "@/types/components/icon"

export default function LuggageIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
      height="20"
      viewBox="0 0 20 20"
      width="20"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#26201E"
        d="M6.938 20.938c-.516 0-.958-.184-1.325-.551a1.806 1.806 0 0 1-.55-1.325V8c0-.533.19-.989.569-1.368.38-.38.835-.57 1.368-.57h2.063V3.237c0-.35.137-.633.412-.85a1.51 1.51 0 0 1 .963-.325h3.124c.367 0 .688.109.963.326.275.216.412.5.412.85v2.825h2.126c.515 0 .957.183 1.324.55.367.367.55.809.55 1.324v11.125c0 .516-.183.957-.55 1.325-.367.367-.809.55-1.325.55a.846.846 0 0 1-.252.624.85.85 0 0 1-.625.252.843.843 0 0 1-.622-.252.85.85 0 0 1-.25-.623H8.686c0 .25-.084.458-.252.625a.852.852 0 0 1-.625.25.843.843 0 0 1-.622-.252.85.85 0 0 1-.25-.623Zm0-1.875h10.125V7.938H6.938v11.125Zm1.813-1.125a.665.665 0 0 0 .687-.688v-7.5a.667.667 0 0 0-.69-.688.665.665 0 0 0-.685.688v7.5a.667.667 0 0 0 .688.688Zm3.25 0a.665.665 0 0 0 .687-.688v-7.5a.667.667 0 0 0-.69-.688.665.665 0 0 0-.685.688v7.5a.667.667 0 0 0 .688.688Zm3.25 0a.665.665 0 0 0 .687-.688v-7.5a.667.667 0 0 0-.69-.688.665.665 0 0 0-.685.688v7.5a.667.667 0 0 0 .688.688ZM10.438 6.063h3.124V3.438h-3.124v2.624Z"
      />
    </svg>
  )
}
