src/components/Logo.tsx

import React from 'react';

interface LogoProps {
  className?: string;
  size?: number;
}

export const Logo: React.FC<LogoProps> = ({ className = "", size = 40 }) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 512 512"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      {/* Background */}
      <rect width="512" height="512" fill="currentColor"/>
      
      {/* Ornamental Border - Inspired by Indonesian Batik */}
      <path 
        d="M256 48
           C384 48, 464 128, 464 256
           C464 384, 384 464, 256 464
           C128 464, 48 384, 48 256
           C48 128, 128 48, 256 48Z" 
        stroke="white" 
        strokeWidth="24"
        fill="none"
      />
      
      {/* Central Pattern - Inspired by Kawung */}
      <circle cx="256" cy="176" r="48" fill="white" opacity="0.95"/>
      <circle cx="336" cy="256" r="48" fill="white" opacity="0.95"/>
      <circle cx="256" cy="336" r="48" fill="white" opacity="0.95"/>
      <circle cx="176" cy="256" r="48" fill="white" opacity="0.95"/>
      
      {/* Center Circle */}
      <circle cx="256" cy="256" r="32" fill="white"/>
      
      {/* Decorative Lines */}
      <path
        d="M256 88
           C344 88, 424 168, 424 256
           C424 344, 344 424, 256 424
           C168 424, 88 344, 88 256
           C88 168, 168 88, 256 88Z"
        stroke="white"
        strokeWidth="8"
        fill="none"
        opacity="0.6"
      />
    </svg>
  );
};