import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

import { cn } from '@/utils/cn'

export const BrowserComponent: React.FC<{ children?: React.ReactNode; className?: string }> = ({
  className,
  children
}) => (
  <div
    className={cn(
      'relative text-sm dark:text-neutral-400 text-neutral-950 border dark:border-neutral-800 rounded-lg w-full h-[400px] dark:shadow-none shadow-lg shadow-gray-200 dark:dots-neutral-800 dots-gray-300 dark:bg-neutral-950 bg-white',
      className
    )}
  >
    <div
      className={
        'border-b border-inherit flex items-center justify-between w-full py-2 px-4 bg-inherit rounded-t-lg'
      }
    >
      <div className={'flex gap-2'}>
        <div className={'w-3 h-3 rounded-full dark:bg-neutral-800 bg-neutral-300'} />
        <div className={'w-3 h-3 rounded-full dark:bg-neutral-800 bg-neutral-300'} />
        <div className={'w-3 h-3 rounded-full dark:bg-neutral-800 bg-neutral-300'} />
      </div>
      <div
        className={
          'border border-inherit rounded-md flex gap-2 px-1.5 py-1 font-sans w-fit min-w-1/3'
        }
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          strokeWidth="2"
          className={'dark:stroke-neutral-700 stroke-neutral-300 w-4 max-w-5'}
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
        </svg>
        <span className={'text-sm flex items-center justify-center'}>
          yourwebsite.com/admin/sales
        </span>
      </div>
      <div />
    </div>
    <div className={'w-full h-full absolute top-0 left-0 pt-12'}>{children}</div>
  </div>
)

import type { Config } from 'tailwindcss'
//@ts-ignore
import { default as flattenColorPalette } from 'tailwindcss/lib/util/flattenColorPalette'
import svgToDataUri from 'mini-svg-data-uri'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  darkMode: 'class',
  plugins: [
    function ({ matchUtilities, theme, addUtilities }: any) {
      matchUtilities(
        {
          dots: (value: any) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
            )}")`
          })
        },
        { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
      )
    }
  ]
}
export default config