'use client'

import { Handle, Position, type NodeProps } from '@xyflow/react'

export default function SinkNode({ data }: NodeProps) {
  const fillLevel = (data as any).fillLevel ?? 0

  return (
    <div className="flow-node">
      <Handle type="target" position={Position.Left} className="!bg-flow/50 !w-3 !h-3 !rounded-full !border-0" />
      <div className="text-center">
        <div className="text-foam/35 text-lg mb-1">◎</div>
        <div className="text-foam/50 text-xs font-light">{(data as any).label || 'Sink'}</div>
        {/* Fill level indicator */}
        <div className="w-full h-1.5 bg-deep/60 rounded-full mt-2 overflow-hidden">
          <div
            className="h-full bg-flow/50 rounded-full transition-all duration-500"
            style={{ width: `${Math.min(100, fillLevel)}%` }}
          />
        </div>
      </div>
    </div>
  )
}