d3ro-voice/packages/ui/src/components/ds/DoubleBezelCard.tsx

'use client'

// packages/ui/src/components/ds/DoubleBezelCard.tsx
// High-End Agency / Awwwards-Tier Double-Bezel (Doppelrand) Enclosure Component
// Outer Shell: Precision machined tray with outer radius & ambient hairline
// Inner Core: Floating glass plate with concentric inner radius, specular highlight & blur

import React from 'react'
import { Box, type BoxProps } from '@mui/material'
import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'

export interface DoubleBezelCardProps extends Omit<BoxProps, 'component'> {
  /** Outer padding between tray and core (default: 6px) */
  bezelPadding?: number | string
  /** Whether the card shows an interactive lift / glow on hover */
  interactive?: boolean
  /** Inner core padding (default: 3 / 24px) */
  innerPadding?: number | string
  /** Content to render inside the inner core */
  children?: React.ReactNode
}

export function DoubleBezelCard({
  bezelPadding = '6px',
  interactive = false,
  innerPadding = 3,
  children,
  sx,
  ...boxProps
}: DoubleBezelCardProps): React.ReactElement {
  return (
    <Box
      {...boxProps}
      sx={{
        position: 'relative',
        borderRadius: d3roRadius.doubleBezelOuter,
        p: bezelPadding,
        bgcolor: d3roPalette.glass.raised,
        border: `1px solid ${d3roPalette.glass.hairline}`,
        boxShadow: interactive ? d3roShadow.card : 'none',
        transition: 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease',
        ...(interactive
          ? {
              cursor: 'pointer',
              '&:hover': {
                borderColor: d3roPalette.glass.hairlineStrong,
                boxShadow: d3roShadow.glowCardHover,
                transform: 'translateY(-2px)',
                '& .d3-inner-core': {
                  bgcolor: d3roPalette.bg.cardHover,
                },
              },
              '&:active': {
                transform: 'translateY(0px) scale(0.99)',
              },
            }
          : {}),
        ...sx,
      }}
    >
      {/* Inner Core Container */}
      <Box
        className="d3-inner-core"
        sx={{
          position: 'relative',
          borderRadius: d3roRadius.doubleBezelInner,
          bgcolor: d3roPalette.glass.surface,
          backdropFilter: `blur(${d3roPalette.glass.blur})`,
          boxShadow: `${d3roShadow.inset}, ${d3roShadow.glowCard}`,
          p: innerPadding,
          overflow: 'hidden',
          transition: 'background-color 0.25s ease',
          // Top Sheen + Specular highlight
          '&::before': {
            content: '""',
            position: 'absolute',
            inset: 0,
            borderRadius: 'inherit',
            background: d3roPalette.glass.sheen,
            pointerEvents: 'none',
          },
          // 1px Gradient Hairline Rim
          '&::after': {
            content: '""',
            position: 'absolute',
            inset: 0,
            borderRadius: 'inherit',
            padding: '1px',
            background: d3roPalette.glass.borderGradient,
            WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
            WebkitMaskComposite: 'xor',
            maskComposite: 'exclude',
            pointerEvents: 'none',
          },
        }}
      >
        <Box sx={{ position: 'relative', zIndex: 1 }}>{children}</Box>
      </Box>
    </Box>
  )
}