// components/partials/badge/Badge02.tsx
import React from 'react';

const Badge02 = () => {
  return (
    <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
      {/* Primary Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#465fff] px-2.5 py-0.5 text-sm font-medium text-white">
        Primary
      </span>

      {/* Success Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#12b76a] px-2.5 py-0.5 text-sm font-medium text-white">
        Success
      </span>

      {/* Error Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f04438] px-2.5 py-0.5 text-sm font-medium text-white">
        Error
      </span>

      {/* Warning Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f79009] px-2.5 py-0.5 text-sm font-medium text-white">
        Warning
      </span>

      {/* Info Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#0ba5ec] px-2.5 py-0.5 text-sm font-medium text-white">
        Info
      </span>

      {/* Light Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#98a2b3] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
        Light
      </span>

      {/* Dark Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#1d2939] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white">
        Dark
      </span>
    </div>
  );
};

export default Badge02;