import React from 'react';
import { Box } from '@mui/material';

const Logo = ({ size = 40 }) => {
  return (
    <Box
      component="svg"
      width={size}
      height={size}
      viewBox="0 0 128 128"
      xmlns="http://www.w3.org/2000/svg"
      sx={{ display: 'block' }}
    >
      <defs>
        <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style={{ stopColor: '#a855f7', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#3b82f6', stopOpacity: 1 }} />
        </linearGradient>
      </defs>
      <rect width="128" height="128" rx="28" fill="url(#logoGrad)" />
      <path d="M 48 35 L 48 93 L 93 64 Z" fill="#ffffff" opacity="0.95" />
      <path
        d="M 64 64 C 64 64, 54 56, 48 50 C 42 44, 38 38, 38 36 L 96 64 C 96 64, 94 68, 88 74 C 82 80, 74 88, 66 93"
        fill="none"
        stroke="#ffffff"
        strokeWidth="3"
        opacity="0.4"
        strokeLinecap="round"
      />
    </Box>
  );
};

export default Logo;
