'use client';

import * as React from 'react';
import { cn } from '@/lib/utils';
import { X } from 'lucide-react';

// Create context to pass open state and onOpenChange to SheetContent
interface SheetContextValue {
  open: boolean;
  onOpenChange?: (open: boolean) => void;
}

const SheetContext = React.createContext<SheetContextValue>({ open: false });

interface SheetProps {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  children: React.ReactNode;
}

export function Sheet({ open = false, onOpenChange, children }: SheetProps) {
  return (
    <SheetContext.Provider value={{ open, onOpenChange }}>
      {open && (
        <div
          className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm"
          onClick={() => onOpenChange?.(false)}
        />
      )}
      {children}
    </SheetContext.Provider>
  );
}

interface SheetContentProps {
  side?: 'left' | 'right' | 'top' | 'bottom';
  className?: string;
  children: React.ReactNode;
}

export function SheetContent({ side = 'right', className, children }: SheetContentProps) {
  const { open, onOpenChange } = React.useContext(SheetContext);
  
  const sideClasses = {
    left: 'left-0 top-0 h-full w-3/4 max-w-sm border-r',
    right: 'right-0 top-0 h-full w-3/4 max-w-sm border-l',
    top: 'top-0 left-0 w-full h-3/4 border-b',
    bottom: 'bottom-0 left-0 w-full h-3/4 border-t',
  };
  
  const transformClasses = {
    left: open ? 'translate-x-0' : '-translate-x-full',
    right: open ? 'translate-x-0' : 'translate-x-full',
    top: open ? 'translate-y-0' : '-translate-y-full',
    bottom: open ? 'translate-y-0' : 'translate-y-full',
  };

  return (
    <div
      className={cn(
        'fixed z-50 gap-4 bg-deep-black p-6 shadow-lg transition-transform duration-300 ease-in-out',
        sideClasses[side],
        transformClasses[side],
        className
      )}
    >
      <button
        onClick={() => onOpenChange?.(false)}
        className="absolute right-4 top-4 rounded-full p-2 text-text-light-gray hover:bg-soft-dark hover:text-crimson-red transition-colors"
        aria-label="閉じる"
      >
        <X className="h-5 w-5" />
      </button>
      {children}
    </div>
  );
}
